San Jose State University : Site Name


Main Content

Working in Mars Mission Control, JPL

Ronald Mak

Department of Computer Science
Fall Semester 2015

Office hours: MW 3:00 - 4:00 PM
Office location: MacQuarrie Hall, room 413
Mission Control, Jet Propulsion Laboratory (JPL)
NASA Mars Exploration Rover Mission

CS 174/SE 174 Web Programming

Section 2: MW 10:30 - 11:45 AM, DH 450
Section 4: MW   1:30 -   2:45 PM, DH 450


# Assigned Due Project
1 Aug 31 Sept 8 Simple end-to-end web application
2 Sept 14 Sept 21 HTML page formatting and layout with CSS
3 Sept 23 Sept 30 Table joins and PHP prepared statements
4 Sept 30 Oct 14 JavaScript
5 Oct 21 Oct 28 Object-relational mapping
6 Oct 28 Nov 6 jQuery and jQuery UI
7 Nov. 4 Nov. 13 AJAX


Date Content
Aug 24 Slides: Goals; client side: HTML5, CSS3, JavaScript, jQuery, AJAX; server side: PHP, object-relational mapping (ORM), Laravel; back end: MySQL database, XML, web services; more: security, localization (L10N), internationalization (I18N), search engine optimization (SEO); install XAMPP
Aug 26 Slides: XAMPP control panel and home page; XAMPP directory structure; client-server web apps; basic "naked" HTML; HTML page template; paragraphs and headings; lists; tables; links; images; form data; text input; checkbox input; radio button input; select list input

Example basic HTML files: paragraphs.html   lists.html   tables.html   links.html   images.html
Example image files: RonCats1a.jpg   RonCats1a.jpg   RonCats1a.jpg   RonCats1a.jpg
Example form HTML files: text.html   checkbox.html   radio.html   select.html
Example PHP form processing: text.php   checkbox.php   radio.php   select.php
Jan 29 Slides: Serving web pages; get and post; three-tier architecture; phpMyAdmin; set the root password; edit; add a new database user; create a table; insert data; MySQL command line; simple end-to-end web application; Assignment #1

Simple end-to-end web application: index.html   queryDB.php
Sept 2 Slides: Fetch mode; single-query alternative; PHP syntax; variables; strings; heredocs; string operations; constants; arrays; indexed arrays; associative arrays; looping over array elements; multidimensional arrays; functions; scope; PHP Data Objects (PDO); PDO examples

Single-query alternative: queryDB2.php
Example PHP features: strings.php   heredoc.php   indexedarray.php   assocarray.php   multiarray.php
Sept 9 Slides: Link to a style sheet; style rules; style colors; element classes; class selectors; element IDs; ID selectors; grouping selectors; selection by context; first or last child; first letter or line; select links; select based on attributes; inheritance; cascade; embedded style sheet; inline styles

Example CSS style sheets: paragraphs1.html   css/mystyles1.css   paragraphs2.html   css/mystyles2.css   paragraphs3.html   css/mystyles3.css   links.html   css/linkstyles.css  
Sept 14 Slides: Formatting text; font family, style, weight, size, line height; variants; combining font values; line and letter spacing; text alignment, indentation; transformation; controlling element display; box model; borders; padding; margins; floating elements; relative positioning; absolute positioning; vertical alignment; HTML container elements; ARIA Landmark roles; page layout example; Assignment #2

Example page layout: index.html   css/lejournal.css   img/about-me.jpg   img/gettyvilla.jpg   img/logo.jpg   img/map.png   img/victoria.jpg  
Sept 16 Slides: Search engine optimization (SEO); SEO tools; working with graphic designers
Sept 21 Slides: Data independence; back-end data repository; data modeling; conceptual data model; relational data model; logical data model; normalization; first and second normal forms; entity-relationship (ER) diagrams; one-to-many and many-to-many relationships; SQL; query examples; SQL to create and drop a database; SQL to create a table; SQL to insert, update, delete records

Dump of the school database: code/school.sql
Sept 23 Slides: SQL to create and drop a database; SQL to create a table; insert, update, delete records; MySQL workbench; query() vs. exec(); table join with PHP; SQL injection attack; prepared statement; parameter binding; Assignment #3; MySQL conditional operators; LIKE and NOT LIKE; sorting and limiting query results;

Example PHP database code: studentsof1.html   studentsof1.php   studentsof2.html   studentsof2.php   studentsof3.html   studentsof3.php  

Example SQL injection attack: teacher1.html   teacher1.php
Example PHP prepared statement: teacher2.html   teacher2.php
Sept 28 Slides: MySQL conditional operators; LIKE and NOT LIKE; sorting and limiting query results; MySQL functions: text, numeric, date and time; formatting date and time; Document Object Model (DOM); JavaScript functions and variables; obtaining text input field values; modifying the DOM; viewing generated source code; checkbox values; radio button values; select menu values; multiple selection values

Example JavaScript code: backgroundcolor1.html   backgroundcolor2.html   backgroundcolor3.html   adds1.html   adds2.html   checkbox.html   radio.html   multisel.html
Sept 30 Slides: Input validation; JavaScript regular expressions; validate phone number and email address; validation with HTML5 and CSS3; new HTML5 input types; JavaScript event handlers; Assignment #4; JavaScript Bingo program

Example input validation code: validate1.html   validate1.css   validate2.html   validate2.css   validate3.html   validate3.css  
JavaScript Bingo: bingo.html   bingo.cs   bingo.js  
Oct 5 Slides: HTML5 canvas object; colors; gradients; rectangles; text; shadows; paths; line attributes; arcs and circles; quadratic and Bézier curves; images; altering pixels; Assignment #4

Example canvas code: simple.html   gradients.html   rectangles.html   text.html   shadow.html   path.html   lines.html   arcs.html   quadratic.html   bezier.html   images.html   pixels.html   images/RonCats.jpg  
Oct 7 Slides: JavaScript animation; temporary coordinate system; scaling; rotation; translation; animation loop; animated rotation; moving objects; keyboard animation control; mouse events; mouse animation control; animated menus

Example animation code: transform.html   rotate.html   bounce.html   arrowkeys.html   images/bristol.png
Example animated menus: menu1.html   menu1.css   menu1.js   menu2.html   menu2.css   menu2.js  
Oct 12 Slides: More JavaScript regular expressions: reversing and formatting names; more document object model (DOM): adding, inserting, replacing, and deleting DOM nodes; JavaScript classes, objects, and prototypes; hybrid web pages

Example regular expression code: reverse.html   reverse.js   format.html   format.js
Example DOM manipulation: nodes.html   nodes.js  
Oct 14 Slides: Hidden input fields; PHP input filtering; object-oriented PHP: classes, inheritance, objects, abstract classes, interfaces, traits; review for the midterm

Example object-oriented code: Pet.php   Shape.php   Triangle.php   Crud.php   User.php   Debug.php   Rectangle.php   traittest.php
Oct 21 Slides: Midterm solutions; object-relational mapping (ORM); type hinting; namespaces; Assignment #5; PHP error reporting; custom error handler; PHP command line interface (CLI); interactive PHP CLI; PHP script file

Example ORM code: people1.html   queryDB1.php   people2.html   queryDB2.php
Example error handling code: display.php   levels.php   suppress.php   custom.php
Example PHP script file: list.php  
Oct 26 Slides: AJAX; XMLHttpRequest object; readyState property values; jQuery: downloads, library, API; simple AJAX; objects; initialization; selecting elements; setting style; events; changing classes; jQuery/AJAX templates; automatic looping; object effects; object animation

Example AJAX code: nonajax.php   ajax.html   bounce.js   lorem.txt   images/bristol.png

Example jQuery code:
ajax.html   js/ajax.js   lorem.txt
hover.html   js/hover.js
class.html   css/class.css   js/class.js
courses.html   css/courses.css   js/courses.js   parts/header.html   parts/footer.html
courses/CS149.html   courses/CS153.html   courses/CS153.html   courses/CS235.html
pullquote.html   css/pullquote.css   js/pullquote.js
effects.html   css/effects.css   js/effects.js   images/bristol.png
animate.html   css/animate.css   js/animate.js  
Oct 28 Slides: The jQuery User Interface Toolkit; themes; drag and resize an object; UI icons; toolkit classes for CSS; drag and drop; UI widgets: accordion, tabs, AJAX tabs; UI widgets: data picker, slider, selectable, sortable, dialog; Assignment #6

Example jQuery UI code:
drag.html   js/drag.js   images/bristol.png
resize.html   css/resize.css   js/resize.js
dragdrop.html   css/dragdrop.css   js/dragdrop.js
accordion.html   js/accordion.js
tabs.html   js/tabs.js   ajaxtabs.html
courses/CS149.html   courses/CS153.html   courses/CS153.html   courses/CS235.html
tools.html   css/tools.css   js/tools.js
Nov 2 Slides: AJAX and jQuery; dynamically populated menu; dynamically created table; load() instead of $.get() or $.post(); cookies; sessions

Example AJAX code:
studentsof4.html   studentsof4.js   studentsof5.html   studentsof5.js   teachers.php   students.php
Example cookie and session code: cookie.php   session.php
Nov 4 Slides: Assignment #6; XML components; XML tools; XML data; Expat event-driven parser; courses.xml; Expat parsing for structure; Expat parsing XML to HTML; Expat advantages and disadvantages; "Simple" DOM-based parser; "Simple" advantages and disadvantages

Example XML code: courses.xml
Example Expat code: structure.html   structure.php   courses1.html   courses1.php
Example "Simple" code: courses2.html   courses2.php
Nov 9 Slides: Web services: traditional and RESTful; browser-based web service clients; Google maps; mobile apps; responsive websites; viewports; CSS media types; @media qualifier; responsive layout; jQuery mobile library; mobile accordion; mobile multipage

Example Google map code:   map.html   css/map.css   map.js
Example responsive code:
qualifier.html   css/qualifier.css
layout.html   css/layoutWide.css   css/layoutNarrow.css
multipage.html   css/multipage.css
Nov 16 Slides: Internationalization (I18N) and localization (L10N); locale settings; developing I18N apps; PHP support for I18N; determining a user's locale; localize text messages; localize dates and times; date and time formatting codes; localize numbers and currency; locale-aware sorting

Example I18N code:
locale.php   counter.php   text1.php   dates1.php   dates2.php   dates3.php   numbers.php   currency1.php   currency2.php   currency3.php   sorting.php
Nov 18 Slides: Secure communications; public key cryptography; security; brute force attack; session hijacking; session fixation; cross-site scripting (XSS); SQL injection

Example security code: xss1.php   xss2.php   injection.html   injection.php
Nov 23 Slides: Web presentations next weeek; model-view-controller (MVC); advantages of MVC; web application framework; inversion of control; Laravel 5; complete Laravel app; Laravel directory structure; to-do application; Laravel debugbar; welcome page controller and view; page templates; "about" controller and view; Laravel models and migration; seed the database; "lists" controller and view; create a contact form and form request; Laravel ORM; create a new to-do list; store into the database; page navigation routing

Example Laravel 5 code:
app/Http/Controllers/WelcomeController.php   resources/views/layouts/welcome.blade.php
app/Http/Controllers/AboutController.php   resources/views/about/index.blade.php
database/seeds/DatabaseSeeder.php   database/seeds/TodolistTableSeeder.php
app/Http/Controllers/ListsController.php   resources/views/list/index.blade.php
resources/views/about/contact.blade.php   app/Http/Requests/ContactFormRequest.php
app/Http/Controllers/resources/views/create.blade.php   app/Http/Requests/ListFormRequest.php  
Nov 25 Slides: Definitions of usability; don't make me think; scan vs. read; "satisfice"; follow conventions; visual hierarchies; format text to support scanning; "scent of information"; confusing options; home page; navigation; page names; "you are here", website taglines
Dec 7 Slides: Cognitive science; biased perceptions; bias by experience: priming, familiar patterns, context, goals; perception and UI design; long-term memory; recognition vs. recall; recognition and UI design; working memory; attention; working memory and UI design; long-term memory and UI design; attention and goals; change blindness

Videos: Usability testing    Perception    Attention and change blindness   


Developing a successful multi-tier web application involves client-side programming, server-side programming, and back-end programming. This class introduces various software technologies commonly used in each tier:

We will also discuss security, localization (L10N), internationalization (I18N), and search engine optimization (SEO). With so many software technologies, this class can provide only introductions and guidance — you will need to explore each technology further on your own.

Students will work in small project teams. Each team will develop a major web application of its choosing incrementally throughout the semester.


CS 46B Introduction to Data Structures grade C- or better
  Department policy is to enforce  
  all course prerequisites strictly.  

Required books

There are no required books for this class.

Recommended books for self-study

HTML and CSS: Visual QuickStart Guide (8th edition)
Elizabeth Castro and Bruce Hyslop
Peachpit Press, 2013
ISBN: 978-0321928832
JavaScript: Visual QuickStart Guide (9th edition)
Dori Smith and Tom Negrino
Peachpit Press, 2014
ISBN: 978-0321996701
JavaScript: The Definitive Guide (6th edition)
David Flanagan
O’Reilly, 2011
ISBN: 978-0-596-80522-4
PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide (4th edition)
Larry Ullman
Peachpit Press, 2011
ISBN: 978-0321784070ß
Learning PHP, MySQL, JavaScript, CSS & HTML5:
A Step-by-Step Guide to Creating Dynamic Websites (3rd edition)

Robin Nixon
O'Reilly Media, 2014
ISBN: 978-1491949467
JavaScript & jQuery: The Missing Manual (3rd edition)
David Sawyer McFarland
O'Reilly Media, 2014
ISBN: 978-1491947074
jQuery Pocket Reference
David Flanagan
O’Reilly, 2011
ISBN: 978-1-449-39722-7
HTML5 and CSS3 All-in-One For Dummies (3rd edition)
Andy Harris
For Dummies, 2014
ISBN: 978-1118289389
Code Bright
A free online book on Laravel by Dayle Rees.
See also

Software to install

Install the Windows or Mac version.