Course overview

Basic Web Architecture:

• Internet communication, client/server
• Hypertext Transfer Protocol (HTTP)
• Uniform Resource Locators (URL)
• Hypertext Markup Language (HTML)

HyperText Markup Language (HTML)

• Intro to XHTML
  • example.html
• Pro Tip for learning anything online: Examples, examples, examples!
  • Thorough tutorial at W3Schools.com
  • Reference at Mozilla Developer Network

Cascading Style Sheets (CSS)

• Intro to CSS
  • example.html
  • style.css
• Use Google to find particular CSS tags! Most searches will get you to...
  • The excellent CSS Reference @ w3schools.
  • The CSS Tutorial @ w3schools is there too, if you want more information.

Version Control with Git

Lab Activities

1. Make a single HTML page about something that interests you. Content and structure only! In a moment we'll use CSS to make it look the way we want. Your page must include at least HTML tags for typesetting (p, h1, etc), images, anchors, tables and lists. Use the links above as references, or just google. Some notes for first-time HTML writers:
   1. Download this template (right-click and save as...)
   2. Open it in any text editor to make changes
   3. Open it in your web browser to view it
2. CSS lab: make your page look better

Assignments (due 1/24)

• Finish the CSS lab and commit your work using Git
• Read and respond: read the following articles written back at the beginning of the web, and write a page discussing (1) what aspects of the web that they discussed back then most contributed to its massive success and (2) what is most different about the web now than what they imagined? Bring your writeup to class with you.
  • The World-Wide Web (Berners-Lee, 1994)
  • Information Management: A Proposal (Berners-Lee, 1990)
• Read Section 3.2 (Uniform Resource Identifiers) from RFC 2616, the HTTP/1.1 standard. These are the documents that shape how the web works.

HTTP discussion

Mock-ups and Twitter Bootstrap

• Quick and easy CSS-based solution for a consistent, modern look
• Responsive (adapts to mobile), very popular, has spawned many alternatives
• See the docs for:
  • CDN linking and a Starter Template
  • Container and Grid for the basic approach
  • Components to pick-and-choose items
• Compare Unstyled page vs. Bootstrapped page

Lab Activities

CSS Lab: sharing time and Git walkthrough

JavaScript

• Lab: JavaScript Exercises
• For this lab, copy the exercises into a new JS Bin and complete them there. You don't need to signup or login. After you make some changes, a Share button will appear that gives you a link that you can email to me to submit.
• JavaScript resources:
  • Open source course materials, simple and easy to go through
  • Codecademy, can do the free JavaScript intro course w/ email signup
  • w3resource exercises, with solutions, very detailed, not overly user friendly

Assignments (due 1/31)

• Make a third copy of your CSS lab page and style it using Bootstrap. In this case, you'll be editing the HTML rather than linking a CSS file. Commit to the CSS Lab repo.
• Finish the JavaScript Exercises in JS Bin and email me the Share link.

JavaScript exercises wrap-up

Using JavaScript with HTML

• Document Object Model (DOM)
• JavaScript, Selectors & Attributes
• JavaScript and Event-driven Programming
• External: jQuery docs
  • Common jQuery methods: .on(), .text(), .html(), .css(), .attr(), .toggleClass(), .val(), .hide()
  • Common jQuery events: click, blur, keydown, mouse*, hover, submit, select
• External jQuery video tutorial site: try.jquery.com

Lab Activities

Lab: JavaScript and HTML with jQuery

• We'll do this lab in JS Bin as well
• Copy this html code into new bin
• Email the Share link to submit

Assignments (due 2/7)

• Read and respond: find some articles about JavaScript on the web and make a case for its strengths and weaknesses based on what developers say. One page, make sure to cite the articles. Bring to class ready to stand up and make your case.
• Finish the JavaScript and HTML with jQuery lab in JS Bin and email me the Share link.

JavaScript with HTML and jQuery exercises wrap-up

• Linking CSS (<link>) and JavaScript (<script>) files to HTML

Adding new DOM elements

• js_add.html
• js_add.css
• js_add.js

The jQuery UI library

• tabs.html
  • tabs.css
  • tabs.js
  • sub-heading-bg.jpg

• fancy.html
  • fancy.css
  • fancy.js

Lab Activities

Blackjack!

• Repo (with card images): https://classroom.github.com/a/6v4Yo-Rs
• Create a simple 1-player Blackjack game:
  1. Show the dealer hand (one face up), the player hand (face up), player's total (sum of card values) and player's money
  2. Player bets some amount (no split/double, just straight amount)
  3. Player pushes Hit or Stand buttons
  4. On hit, add another card and update player's total
  5. On stand, show dealer card, put up a win/lose banner and adjust the player's money
  6. On click, clear the banner and deal the next game
• Hints:
  • Generate and shuffle an array to represent the cards by name (e.g. "AH", "3D", etc)
  • Display the cards by changing img src
  • Use whatever form elements you like to allow placing bets, but you must bet before hit/stand and can't change it
  • Add new cards by adding new img elements, like we went over today
  • Write a function to calculate the score of a card from its name (e.g. "JD" is worth 10)
  • The player's money can be stored in a script-level variable (global), but everything else should be in functions!

Assignments (due 2/14)

• Finish Blackjack. Commit and push often!

Lab Activities

Blackjack assignment

Next up: Narcissist's Comment Board (due 2/28)

Next, next up: Google Cloud setup for server-side work

• You'll get an email with a coupon code to redeem free time on the Google Cloud Platform
• Deploying a LAMP instance from Cloud Launcher is straightforward
• Setting up for file transfer is less so
• We'll go over this next week, but you're welcome to get started

Assignments

• Complete blackjack (90% ceiling) (due 2/21)
• Narcissist's Comment Board will be due 2/28

Blackjack wrap-up

• Bottom-up vs. top-down development
• State machines

Google Cloud setup for server-side work

• You should have gotten an email from me with a coupon code to redeem free time on the Google Cloud Platform
• Deploy a LAMP instance from Cloud Launcher: https://cloud.google.com/launcher/

Lab Activities

GCloud Compute Engine LAMP setup

Narcissist's Comment Board

Assignments

• Finish Narcissist's Comment Board (due 2/28, 90% ceiling by 3/2)

Relational Databases: Schema, Data and phpMyAdmin

Lab Activities

• Posting board database setup

Assignments

• Prepare for midterm on HTML, CSS, JavaScript and jQuery

Last minute questions in classroom

Midterm in Lab

Assignments

• Go through Propel Setup on your Google Cloud machine

Intro to PHP

• Server-side scripting
• PHP: Hypertext Preprocessor
• PHP request data handling
• Example: basic query string retrieval
• Example: POSTing from a form:
  • the form
  • the processing page
  • the processing page using a function

Lab Activities

• PHP, database and Propel
• Propel Setup

Assignments

• Intro to PHP (through Step 3 due 3/28)

Additional Notes

• PHP Language Basics
• PHP Embedding
  • Example: Basic PHP embedding, variables and print
  • Example: advanced embedding examples
• PHP Associative arrays
  • Example: PHP array handling
  • Example: associative arrays in PHP
• PHP code organization
  • index.php
  • functions.php
• Example: PHP string handling

GCP credit issues

Wrapping up Propel Setup

PHP and ORM for database access

Lab Activities

• Assn06 check off and guided work time

Assignments

• Intro to PHP (finish including bonus step, due 4/4)

GCP credit: stop your instance when not using it!

Assn06 (Intro to PHP) wrapup

• Routing (should you use one or two pages?)
• Recap: form data
• Dates again: PHP DateTime formats and "now"

Need to recap PHP basics? Some resources:

• https://www.w3schools.com/php/default.asp
• http://php.net/manual/en/tutorial.php
• https://www.codecademy.com/en/tracks/php

One-to-many relations and ORM

• Propel Relations
• Lazy (on-demand) inflation
• Propel docs

Lab Activities

PHP Comment Board

Assignments

• Finish PHP Comment Board (due 4/11, 90% ceiling by 4/13)

Security

• Authentication and authorization
• Passwords, hashes and encryption
• Network security and asymmetrical encryption
  • Activity map
• TLS
• OWASP and CWE

Lab Activities

User Security

Assignments

• Finish User Security (due 4/18, 90% ceiling by 4/20)

Assn08 wrapup

• Library inclusion (PhPass)
• Updating a Propel model
• Overriding methods in PHP

Security assignment

• You are contracting to build a storefront website for a local business to allow them to sell their products online. Typical e-commerce site, with back-end administrative pages for them to update listings and manage sales.
• For this assignment, write a two-page addendum to your (imaginary) proposal document detailing the additional costs for implementing security. You need to explain to the client what extra work is needed and why, in a way they can reasonably understand. Heavily cite public resources (such as OWASP and CWE above) to justify the additional cost.

Framework assignment

• Group up and pick today, presentations Wed 5/2

Remembering Data Between Requests: Session

• Embedded links example (the very manual way)
  • qstring1.php
  • qstring2.php
  • qstring3.php
• Cookie passing example (cleaner, but still back-and-forth)
  • cookie1.php
  • cookie2.php
  • cookie3.php
• Session example (server-side storage)
  • session1.php
  • session2.php
  • session3.php
  • session4.php

Model-View-Controller (MVC)

Lab Activities

Login, Session and MVC

Assignments

• Security Assignment due 4/25
• Finish Login, Session and MVC (due 5/2, 90% ceiling by 5/4)
• Framework Presentations will be on 5/2

No class meeting, meet with your presentation groups instead.

Framework Presentations