Dynamic Web Design, PHP

Tools and Resources

Code Editor

• Visual Studio Code
• SFTP Plugin for Visual Studio Code

Tools

• Google Chrome
• FileZilla

References

• W3Schools: CSS Rules List
• W3Schools: HTML Elements List
• W3Schools: PHP
• W3Schools: SQL
• Bootstrap 4

Week 1

Notes

• Before We Begin
• Review: HTML and CSS
• Review: Box Model, <div> and CSS Reset
• Concept: Introduction to PHP
• Concept: Website Modularization with PHP
• Concept: PHP - Basic Syntax

Guide

• Page 1: Setting Up Visual Studio Code
• Page 2: HTML Modularization with PHP Include
• Page 3: Simple PHP Variable Implementation

Week 2

Concept

• Review: Elements of Programming with JavaScript
• Concept: Elements of Programming with PHP
• Concept: Introduction to MySQL Database
• Concept: SQL - Basic Syntax
• phpMyAdmin: web-based database admin tool
• ID: ocad / PW: csdm2n15

Guide

• Page 1: Displaying Database Entries with SQL SELECT
• Page 2: Creating Database Entries with SQL INSERT
• Page 3: Styling with Bootstrap Framework

Week 3

Concept

• Showcase: A visual introduction to machine learning
• Article: Information Visualization – A Brief Introduction
• Video: The Art of Data Visualization | Off Book | PBS Digital Studios
• Review: Image, Type, and Multimedia
• Concept: SVG and Canvas - Comparison

Reference

• Chart.js Samples
• W3Schools: SVG Tutorial

Guide

• Page 1: Setup for SVG and Canvas Experiment
• Page 2: Manual SVG visualization with PHP
• Page 3: Canvas Visualization with PHP and JavaScript Library

Week 4

Concept

• Review: Web 2.0 and Mashup Applications
• Review: Web API, XML and JSON
• Concept: cURL Basic Usage
• Article: Curl – Building RIA Beyond AJAX
• Directory: ProgrammableWeb API
• StackOverflow: "What is the incentive for curl to release the library for free?"

Guide

• Page 1: Setup for API-driven Mashup Application
• Page 2: Image Retrieval via cURL Request to Flickr
• Page 3: Outbound Text Message via Twilio

Week 5

Concept

• Concept: Current State of Artificial Intelligence and Data Mining
• Video: Using Regular Expressions - Computerphile
• Tutorial: RegexOne
• Tool: PHP Live Regex

Guide

• Page 1: Analyzing HTML Page with Regular Expression
• Page 2: Downloading and Parsing HTML Page with PHP
• Page 3: Organizing and Serving Array as CSV

Week 6

Concept

• Article: Beyond PHP and MySQL -- Emerging Paradigms
• Review: Beyond JavaScript and jQuery
• Review: Element of Programming with JavaScript
• Demo: Socket.IO Video Chat
• Demo: WebRTC Video Chat
• Video: BrowserQuest
• Video: Google Puppeteer

Guide

• Page 1: Launching terminal via Visual Studio Code
• Page 2: Programming web browser via Node.js and Puppeteer
• Page 3: Parsing Twilio text messages via Node.js