Web Programming Step by Step

Lecture 28
Going Live / What's Next?

Reading: Ch. 13

Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp, Jessica Miller, and Alex Loddengaard.

Lecture outline

• final exam
• awesome student work
• what next?
• showing your work to others
• further learning
• teaching evaluations

Bandes TA Award nominations

• Did you have a great TA?
• Nominate him/her for the UW Bob Bandes TA award!

Final exam

• Thu, June 12, 2:30pm, GUG 220 (this room)
• 110 mins, 5 questions
• HTML/CSS, JS/DOM/Prototype, Ajax/XML, PHP, SQL, PHP+HTML+SQL
• open book/notes
  • print homework solutions, lecture slides, chapters, lecture code, ...
• practice tests posted on course web site

Review: Prototype's $$ function

highlight all paragraphs inside of the section with ID "footer"

var footerParas = $$("#footer p");
for (var i = 0; i < footerParas.length; i++) {
	footerParas[i].style.backgroundColor = "yellow";
}

• Prototype's $$ function will return the array of DOM elements that matches any CSS selector
• How would we select only span tags with a class of zipcode that are within table cells?

Review: regular expressions

• * means 0 or more occurrences, + means 1 or more, ? means 0 or 1
  • /a.*a/ matches "aa", "aba", "a8qa", "a!?_a", ...
• {min,max} means between min and max occurrences (inclusive)
  • /a(bc){2,4}/ matches "abcbc", "abcbcbc", or "abcbcbcbc"
• [] group characters into a set; will match any single char from set
  • /[bcd]art/ matches strings containing "bart", "cart", and "dart"
• What regex matches phone numbers such as 206-685-2181 or (206)685-2181 ?

Review: SQL joins

• What courses have been taken by both Bart and Lisa?

  SELECT DISTINCT c.name
  FROM   courses c
  JOIN   grades g1 ON g1.course_id = c.id
  JOIN   students bart ON g1.student_id = bart.id
  JOIN   grades g2 ON g2.course_id = c.id
  JOIN   students lisa ON g2.student_id = lisa.id
  WHERE  bart.name = 'Bart'
  AND    lisa.name = 'Lisa';
  

• What imdb query will tell us which actors play more than one character in the same movie? Show the actor's name and the names of the character(s) he/she plays.

We've come so far...

• web programming is now in your blood
• you now (probably) get these jokes:
  

Awesome student work!

• HW1: Grandma's estate sale, John M.'s home cookin', Rotating Pi
• HW2: TMNT review
• HW4: Disney, kitty, hard to solve, vg chars, animated
• HW5: multi-name
• HW6: paper, Jillyn's, draggable, surprise, superheroes, Schedulinator, fading

Sharing your work with others

• show off your awesome programs to your friends!
• put your web dev skillz (and links to your programs) on your resume!
• set up your Dante web space
• your UW web site will be at http://students.washington.edu/YOUR_UWNETID
• put this line at the top of your PHP code:

  <?php
  error_reporting(E_ALL);   # makes dante show error messages
  ...
  

Protecting web resources

• please don't post your HW solutions on the web unprotected!
  (we want to be able to assign some of these programs again)
• posting resources with a shared password:
  • create files named .htaccess and .htpasswd with proper contents and put them in your HW root folder on Dante
  • doesn't require a UW NetID
  • can give password to friends / family / employers

Example htaccess, htpasswd files

.htaccess :

AuthUserFile .htpasswd
AuthGroupFile /dev/null
AuthName EnterPassword
AuthType Basic
require user USERNAME

.htpasswd :

USERNAME:ENCRYPTEDPASSWORD

• place these files in the top folder of the content you want to protect
• htpasswd generator (gives you the text to copy-paste into your .htpasswd file)

Getting Ajax to work

• Ajax (XMLHttpRequest, Ajax.Request) can only connect to the same server as where your .html and .js files are located
• If you put your work up on Dante, your Ajax code will be unable to reach Webster!
• Solution: Put proxy.php in the same folder as your Dante code, and change any Ajax URLs
  • from: http://webster.cs.washington.edu/dir/file.txt
  • to: proxy.php?url=http://webster.cs.washington.edu/dir/file.txt

MySQL on dante

• How to install MySQL on Dante
• download our databases: simpsons.sql, world.sql, imdb_small.sql, imdb.sql
• importing a database into MySQL from a file:

  mysql -u username -p databaseName < filename.sql
  

• exporting a database from MySQL to a .sql file:

  mysqldump -u username -p databaseName > filename.sql
  

Setting up your own web server

• why?
  • test your web apps locally without needing to upload them to Dante
  • host your own projects from your house and connect to them
  • other useful services: SSH, VNC, SMB (Samba), CVS, ...
• how?
  • Linux: Ubuntu (LAMP) server tutorial
  • Windows: Apache (WAMP) tutorial; IIS tutorial

Further Learning

• Yahoo! web developer videos
• more Javascript
  • learn a Javascript effects library such as Scriptaculous
  • learn to write classes/objects in Javascript (tutorial #1, #2)
• make your assignments compatible w/ IE6, Opera, Safari, etc.
• Java-based web stuff
  • JSP / servlets (#1, #2)
  • applets (#1, #2)

Revisiting past homework assignments

• extensions to the assignments from this course:
  • HW1,2: Pick other web sites and try to mimic them
  • HW3: rewrite the gallery.js functionality yourself
  • HW4: use Scriptaculous to animate the movement of the tiles
  • HW5: write the PHP that reads names.txt and feeds XML to client
  • HW7: implement persistent data, uploading of images, a login system
  • HW8: implement the real 6 degrees of Kevin Bacon as seen at oracleofbacon

Courses you can/should take

• CSE 143 - learn more about structuring data and algorithms
• CSE 403 - software engineering (large software projects)
• CSE 498/499 - senior capstones and project courses
• INFO 344 - web tools and development
• ENTRE 475/476 - business aspects of web development