|
Ronald Mak
Department of Computer Science
|
||||||
|
Mission Control, Jet Propulsion Laboratory (JPL) NASA Mars Exploration Rover Mission |
| # | 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 cats.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 config.inc.php;
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 testbedstart.inc.php testbedend.inc.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 accordion.html 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 resources/views/layouts/master.blade.php app/Http/Controllers/AboutController.php resources/views/about/index.blade.php database/migrations/2015_04_30_013203_create_todolists_table.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 |
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.
|
Department policy is to enforce all course prerequisites strictly. |
|
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 laravel.com |
|
XAMPP
Install the Windows or Mac version. |
