CSE 190M Web Programming

Lecture 28: What's Next?

Reading: none

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, Victoria Kirst and Roy McElmurry IV. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Sharing your work with others

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

  <?php
  error_reporting(E_ALL);   # makes UW server 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 UW
  • doesn't require a UW NetID
  • can give password to friends / family / employers

Example htaccess, htpasswd files

.htaccess :

AuthUserFile full/path/to/.htpasswd
AuthName "Restricted Access"
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)
• or from *nix terminal: htpasswd -c .htpasswd username

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 UW, your Ajax code will be unable to reach Webster!
• Solution: Put proxy.php in the same folder as your UW code, and change any Ajax URLs
  • from: http://webster.cs.washington.edu/dir/file.ext
  • to: proxy.php?url=http://webster.cs.washington.edu/dir/file.ext
  • if URL has parameters, encode the query string with JS escape function

MySQL on UW

• How to use MySQL on UW
• download our databases: simpsons.sql, world.sql, imdb_small.sql, imdb.sql
• importing a database into MySQL from a file:
  • upload one of the above .sql files to your UW space
  • open an SSH terminal window on UW server and type:

  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: Linux (LAMP) server tutorial
  • Windows: XAMPP server software download

Revisiting past homework assignments

• extensions to the assignments from this course:
  • HW1,2: Pick other web sites and try to mimic them
  • HW4: implement persistent dating data, uploading of images, a login system
  • HW5: implement the real 6 degrees of Kevin Bacon as seen at oracleofbacon
  • HW6: rewrite the gallery.js functionality yourself using Ajax
  • HW7: use Scriptaculous to add effects and animate the movement of the tiles
• make your assignments compatible w/ IE, Opera, Safari, etc.
• go back and look at the "extra session" notes

Further Learning

• Yahoo! web developer videos
• more Javascript
  • learn to write classes/objects in Javascript (tutorial #1, #2)
  • learn other JS libraries such as Prototype or Yahoo! UI (YUI)
• topics we didn't have time to cover:
  • Web design and usability
  • PHP objects
  • Going "live", making a real web site with your own domain name
  • Macromedia Flash: tutorial 1, tutorial 2, tutorial 3
  • server-side web programming

Advanced Server Side Programming

• MVC is an acronym
  • M: model - the data of your web app
  • V: view - the HTML that the user sees
  • C: controller - the glue and web app logic
• Common features
  • URL mapping
  • HTML page templating
  • Improved database access mechanisms
  • Security improvements

MVC Frameworks

• Pick your favorite language, there is an MVC framework for it

Taking a web site "live"

• buy your own domain name (e.g. projectnomnom.com): DreamHost
• learn about (stalk) your users with Google Analytics
  
• improve your page / improve PageRank: SEO, meta tags
• make a few bucks with ads: Google AdSense
• get the word out: Google AdWords, Webmaster Tools
  

Courses you can/should take

• CSE 143 - learn more about structuring data and algorithms (if you haven't taken it yet!)
• CSE 403 - software engineering (large software projects)
• CSE 490H - distributed systems
• CSE 498/499 - senior capstones and project courses
• INFO 343 / 344 / 340 - web design, web tools/development, databases
• ENTRE 475/476 - business aspects of web development