<%@LANGUAGE="VBSCRIPT" %> <% Response.CacheControl = "no-cache" %>
Assignment 8

Semi-Transparent Overlays and Asynchronous File Uploading

Instructions

This lab will give you experience with uploading files to a server. In many web development projects, there needs to be a method for users to upload files to the server. The reasons can vary from (a) a site that wants users to be able to upload web files to their storage space, (b) our project 2 example where users need to upload images to a central location, to (c) using the upload utility as part of a project where a model of a part needs to be uploaded, stored on a server, tracked in a database, and then tested and manipulated on the server.

This exercise will expose you to jQuery and more extensive CSS. In addition, it will involve using Ajax to communicate with PHP files that you will create and place on the web server. You will use a pre-made design to start with and add a semi-transparent overlay that allows users to upload images to the web server. You do not have to complete the layout / jQuery / CSS portion; that part is completed for you and provided to you for use. You will be completing the PHP, server image resizing, and Ajax portions.

Materials to turn in on the server:

  • In your Assignment folder:
    • "uploads" folder
    • "mid" folder
    • "thumb" folder
    • "images" folder
    • "js" folder
      • jquery-1.7.1.js
      • jquery.form.js
    • index.html
    • upload.php
    • doUpload.php
    • default.css
Introduction Video

<% For i=1 to 123 %> <% Next %>

Standard Page Setup Requirements: Show The Code!

close X
  • The first line of every XHTML5 document should always be the following XML declaration:
    <?xml version="1.0" encoding="UTF-8" ?>
    • No white space (i.e.: No spaces, No line breaks) before this tag.
    • You include this XML element for validation -- The encoding is for accessibility
    • HOWEVER - The PHP declaration also starts with <?, so to be able to do this in PHP, you must have the following as the first thing written out to the browser - only on PHPs that contain XHTML (not on pass-through pages)
      • echo("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
         
  • The second line of each document should use the XHTML5 DTD for the <!doctype> tag.
    <!DOCTYPE html>
     
  • The next line of code should be the opening <html> tag. The <html> tag in every document should always be:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    • xmlns specifies the XML namespace for a document.
    • xml:lang specifies the contents and attributes as English and is a required accessibility standard.
    • lang specifies the content of a tag as English and is a required accessibility standard.
       
  • At the top of every XHTML5 file, between the <head> and </head> tags, place a <meta> tag as shown below:
    <meta charset="utf-8" />
    • The encoding type (UTF-8) should match the encoding in the XML declaration above.
       
  • All pages should conform to the wellformedness constraints of XML (and XHTML).
     
  • All formatting should be done using CSS

Exercise Specifications

  1. Files:
  2. index page
  3. Create these 3 folders and change permissions on them: uploads, mid, thumb
    • Do this for each of the 3 folders:
      • Right click on folder > Properties
      • Security tab
      • Select Edit...
      • Select IUSR
      • Make sure the Allow checkbox for Modify is checked
      • Select IIS_IUSRS
      • Make sure the Allow checkbox for Modify is checked
      • Apply, OK
      • Repeat for each folder
         
  4. Image uploading
    • Start with a nicely designed site so that we have something behind the semi-transparent “lightbox” effect.
    • Clicking the link to upload images causes this overlay to appear, where users can either browse to search for an image to upload, or they can drag and drop an image.
    • Dragging and dropping an image will cause the bounding box to turn dashed.
    • Releasing the mouse button will cause an uploading image to appear while the file is being transferred to the server.
    • Once the image has been saved to the server, the image will appear in the drop area as well as in the smaller “uploaded images” area that shows all of the uploaded images.
    • If the user needs to upload several photos, the thumbnails in the uploaded images area will continue to be added and that area will become scrollable so that the user can still see all of the files that were uploaded.
    • If the user does not want to drag and drop files, there is still a browse option that allows the user to search for an image the traditional way.
    • The upload functionality will resize the image and will store a thumbnail, mid-size, and large image on the server into your folders.
       
    • You must put enctype="multipart/form-data" in your form tag.
    • You must set the method of the form tag equal to post
    • You may need to look up: strrchr(). It is a string manipulation.
    • Check the file type: ".jpg"
      • Because of our resize JPG function, we can only allow JPG images
         
  5. Ajax
    • Two instances of Ajax are in this assignment.
    • The first instance is hooked to the drag and drop functionality. As soon as the mouse button is released, the Ajax function is called, which in turn calls upload.php
    • The second instance is hooked to the browse button and uses the jQuery form library. That Ajax calls doUpload.php
       
  6. Detecting support for functionality
    • IE currently does not support the html5 drag and drop functionality.
    • The jQuery $.browser functionality was deprecated as of 1.3 so we cannot rely on that.
    • We use some JavaScript to get the browser information. The variable will return as undefined if we are using IE.
    • If we are using IE, the drop area should be hidden along with the text that says to drag and drop.
       
  7. Code
    • Here is the code for this entire exercise. Proper use would be: look at the code to make sure you are approaching the assignment the correct way. Then try to do it on your own. Then use the code to make sure you've done it correctly. Improper use would be: copying without interpreting, which would result in not really learning what you're doing. The code is provided to help you be successful and so that you don't have to ask as many questions about the assignment.
    • index page code
    • upload page code
    • doUpload page code
       
  8. Screen Captures
    • Word doc containing images of finished solution

     
  9. Make sure it works on the server!!! Make sure your files actually upload to the 3 folders!!
     
  10. Save a backup copy to your personal drive space.
     
  11. Do not modify any files after the deadline. Timestamps on all files will be checked during grading.

Validation & Accessibility

  • Validate your pages using (a) Dreamweaver and (b) the HTML Validator add-on for Firefox. Fix any errors before turning in.
    • Pre-rendered HTML: Use Dreamweaver built-in page validation
    • Post-rendered HTML: Firefox: View source _or_ Icon on bottom / status bar > Double click for details
    • Using only Dreamweaver is not good enough
    • Always fix the error on top first. Only fix one or two errors at a time. Many times, fixing the top error fixes errors below it.
         
  • Check for JavaScript and CSS errors using the Web Developer toolbar in Firefox.
    • Make sure there is a green check for (a) Standards Compliance Mode, (b) CSS, and (c) JavaScript
       
  • Check accessibility issues using the Accessibility Extension add-on for Firefox. Fix failures before turning in.
    • Accessibility > Reports > Accessibility Issues
    • Validate against FAE rule set
    • This will not fix all accessibility issues, but it is a very good start.
       

Grading Rubric

Drag and Drop to Upload Files -5 pts max
Browse to Upload Files -5 pts max
Resize Images -5 pts max
CSS Aesthetics -5 pts max
Page Validation and Accessibility -5 pts max
   
Total 25 pts possible