MIS 3502 Exam 1

Client Side Ajax call

$.ajax({ url: someurl, data: datatosend, method: http-method, success: function(result) { console.log(result) }, error: function(data) { console.log(data) } });

Server-side supporting function using connection.query

//gets one task let getTask = function(res,taskid){ try{ let txtSQL = "SELECT * FROM tasks where taskid = ?" let results = connection.query(txtSQL, [taskid]) responseWrite(res, results, 200); } catch(e) { console.log(e) responseWrite(res, "Unexpected Error (getTask)' , 500) return; } };

JSON Objects Plain

1. JSON object literals are surrounded by curly braces {}. 2. JSON object literals contains key/value pairs. 3. Keys and values are separated by a colon. 4. Keys must be strings, and values must be a valid JSON data type: '{"name":"John", "age":30, "car":null}'

What characteristics does node.js have?

1. free & open source 2. asynchronous (we do not have to wait for a request to be completed before moving on to the next) 3. run without additional web server software 4. cross-platform 5. app.js 6. has .js extension 7. used for server 8. create/open/read/write files on server 9. hello.js

Jquery Events

Ready Click

SQL Commands- Select Statement

SELECT column1, column2, ...FROM table_name;

server side technologies

SQL, NodeJS and anything that runs in in NodeJS Javascript, Express, sync-mysql

Jquery Methods

Show()- for page or div Hide()- for page or div Html $('#message').html("Perseverance Conquers"); - to clear a message or page Val()- to get or clear a value from an input field Append()- for table Addclass() ex. $('#div1').addClass('alert alert-danger') RemoveClass()

The serialize method definition

The serialize() method creates a URL encoded text string by serializing form values. You can select one or more form elements (like input and/or text area), or the form element itself. The serialized values can be used in the URL query string when making an AJAX request. FINDS EVERY TAG WITH A NAME

SQL Commands- Updating Data into a table

UPDATE table_name SET column1 = value1, column2 = value2, ...WHERE condition;

URL Encoded Data

URL encoding converts characters into a format that can be transmitted over the Internet. Uniform Resource Locator **All URLs are URIs but not all URIs are URLs.

SQL Commands- Use DB

USE mis99mercury;

btn and btn contextual classes

Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. <button type="button" class="btn btn-primary">Primary</button>

POST

Used to create a data record, or initiate an action. Careful about doing more times than necessary. Ex: Request to make a amazon purchase. SQL comp: INSERT INTO VALUES syntax: &.post(someurl, datatosend, function(result) {things to do}); function(result) - function is the callback function that will execute when the call is a success. result is the object returned from the POST method.

GET

Used to retrieve data from a resource. Safe to execute over and over. SQL comp: SELECT FROM

Javascript Variable Declaration (let,const)

Variables are containers for storing data (storing data values). If you want a general rule: always declare variables with const. If you think the value of the variable can change, use let.

The ajax method

ajax() method allows you to send asynchronous http requests to submit or retrieve data from the server without reloading the whole page. $. ajax() can be used to send http GET, POST, PUT, DELETE etc. URL, data, method, success, error

col-md-12

all columns have to add up to 12 in bootstrap

Server-side event handler

app.get('/task', function(req,res){ let taskid = res.query.taskid; getTask(res,taskid); }) app.put('/task', function(req,res){ let taskid = req.body.taskid; let taskcomplete = req.body.taskcomplete; markComplete(res, taskid, taskcomplete); })

Server Side Error Trap

app.put('/tasks', function(req,res,next){ let taskid = req.body.taskid; let taskcomplete = req.body.taskcomplete; if(taskid == undefined || isNaN(taskid) { responseWrite(res, "taskid is missing or incorrect" + taskid, 400) return; } if (taskcomplete == undefined){ responseWrite(res, "taskid is missing or incorrect, 400) return; } if (taskcomplete != 'Y' && taskcomplete != 'N'){ responseWrite(res, "taskcomplete is missing or incorrect, 400) return; } next(); })

let

block scoped bounded by {} - does not exist outside of brackets let can be updated but NOT re-declared

what file types/software do we use for client, server, and database sides respectively?

client: index.html, app.css, app.js (bootstrap and jQuery frameworks) server: app.js (node.js) database: mySQL

container vs container-fluid

container-fluid spans the entire width of the viewport. it will expand and shrink to fit the space of the window as it is enlarged or shrunk.

what do div tags consist of?

containers (biggest), rows, and columns - *columns must add to 12 each div tag must have a class and a closing div tag!!! ex:<div class = "container"> <div class = "row"> <div class = "col-md-2"> </div> <div class = "col-md-10"> </div> </div> </div>

var

defines a variable can be updated and re-declared

Express cheatsheet for app.js (will be provided but be familiar!)

express app object: app.use() app.get() -usually defines the api with the /path. app.post() app.listen() -for port number- request object-req response object-res res.object res.header() res.writeHead() res.write() res.end() ***next() object --> go process the next matching condition. should be at the end of a block of code.

For Loop Syntax

for(let i = 0 ; i < # , i++){

Function Expression Syntax

let bluefish = function(num) {... } {

Client Side Error Trap

let taskname = $("#taskname").val() if(taskname == ' '){ $("#message-addtask").html("you must provide a task name"); $("#message-addtask").addClass("alert alert-danger"); return; }

const

maintain constant values cannot be updated OR re-declared used for database connections

Command Line Statements

npm, node qckwinsvc

Javascript Data Types

number string boolean Null- no value Undefined- A variable that has not been assigned a value is of type undefined object

Why do we use getJSON()?

when we want to retrieve data from the API

The serialize method syntax

$("button").click(function(){ $("div").text($("form").serialize());});

Hide Button

$(document).ready(fuction(){ $("#hide").click(function(){ $("p").hide();

Jquery #hashtag vs "." dot

# Selects a single element with the given id attribute. ("#id") "." Selects all elements with the given class. (".class")

Show Button

$("#show").click(function(){ $("p").show(3000);

REST concepts

1.Any HTTP request for features that are sensitive/protected will need to be accompanied by the presence of a usertoken. The API endpoint will use the usertoken to determine if the request is valid or not. 2.We will use the HTTP methods for their intended purposes (GET, POST, PUT, DELETE) 3.We will use the HTTP status codes for their intended purposes. Specifically you will need to know some status codes: 200 (success), 400 (Bad Request), and 500 (Internal Server Error). 4.We will continue to provide simple documentation at the root of the endpoint. 5.We will need to "step up our game" on the client to make use of the HTTP methods and status codes that REST expects us to use.

Bootstrap Classes

<div> tag holds all bootstrap elements with class = "container"

how do we connect index.html to app.css?

<link rel= "stylesheet" href = "css/app.js>

What's Web Application?

A web application is application software that runs in a web browser, unlike software programs that run locally and natively on the operating system of the device. Web applications are delivered on the World Wide Web to users with an active network connection.

Whats a Web Service

A web service is a specific kind of API. A web service is an API that uses web protocols. In our case, those protocols will be HTTP and (almost always) URL encoding, and JSON.

What's an API?

API is short for Application Programming Interface. An API is software that a developer can use to programmatically control a resource without knowing all the technical detail about that resource.

client side technologies

Anything that runs in the browser, HTML, CSS, Bootstrap, Javascript, jQuery

Bootstrap Classes (cont.)

Bootstrap is a collection of CSS classes and JavaScript function and it is used for responsive design and building responsive, mobile-first site and application.

SQL Commands- Create DB

CREATE DATABASE mis99mercury;

SQL Commands- Creating a Table

CREATE TABLE table_name ( column1 datatype, column2 datatype, column3 datatype, ....);

Bootstrap classes- Container

Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport. Example: <div class="container"> <!-- Content here --> </div>

SQL Commands- Deleting data from a table

DELETE FROM table_name WHERE condition;

DELETE

Exists in HTTP. Used to delete a data record. SQL: DELETE FROM WHERE

PUT

Exists in HTTP. Used to update an existing data records. SQL comp: UPDATE SET WHERE

(what are the HTTP methods and HTTP status codes we use?)

GET, POST, PUT, DELETE 500-server 400-client 200-success

SQL Commands- Putting into a table

INSERT INTO table_name (column1, column2, column3, ...)VALUES (value1, value2, value3, ...);

Bootstrap classes (row and column)

In Bootstrap, the "row" class is used mainly to hold columns in it.

Callback function

JavaScript functions are executed in the sequence they are called. Not in the sequence they are defined. This example will end up displaying "Goodbye": function myFirst() { myDisplayer("Hello");} function mySecond() { myDisplayer("Goodbye");} myFirst(); mySecond();

alert and alert contextual classes

Provide contextual feedback messages for typical user actions <div class="alert alert-primary" role="alert"> This is a primary alert—check it out! </div>