Lab 4
Using a Toolkit: jQuery

Introduction

This week you will adapt your existing website to use the jQuery library, and then leverage jQuery to add snazzy additional features.

Grading

See grading sheet, but your new use of jQuery should be complex/sophisticated enough to justify the fact that this is a 2-week lab. Creativity/difficulty will count here: you can expect creative use of a complex element (or multiple simpler elements) to earn more points than a single jQuery button added to your page.

Instructions

  1. Copy your Lab03 files to a new Lab04 directory. Your main file should still be called index.html
  2. Point to the jQuery library in your HTML files. See Addenda below.
  3. Disable the browser's built-in autocomplete (see "Helpful stuff" below). Also do this in your room, or you may be fooled into thinking your lab works when it does not!
  4. Here is what you what you want to have when you are finished. Suggested plan of attack for getting there is below:
    1. jQuery Ajax: Everything from Lab03 should still work, but you should change all uses of XMLHttpRequest to use the corresponding jQuery approach. The synchronous communication should now be asynchronous with jQuery (asynch is the default).
    2. jQuery Selectors: You should change all getElementById and getElementsByTagName to use jQuery selectors. This will also mean changing your code that used whatever was returned by ID or Tag name. (e.g., if you changed styles, you now need to use jQuery methods to change the styles). (TIP: see calendar for the AJAX XML v2 example to see how to use jQuery to extract specific tags from XML that you receive via AJAX).
    3. jQuery AutoComplete: Put the Autocomplete plugin library in your directory. See Addenda below. You should create a search box with jQuery-enabled autocomplete, and only words/phrases that match with the user's input characters should be displayed. The data for the autocomplete must be a server-side program (Perl or PHP) that queries the database for the auto-completion words. Your script should only send words/phrases that match the query. Do not send the whole DB and use the plugin to filter them. You need to insert example entries into the DB, and you should have at least 20 entries to make it an interesting demo (See "Addenda" (below) for details on how to access the Autocomplete plugin code!). You'll probably insert these entries by hand with Workbench, at least initially.
    4. jQuery Plugin: Find a new jQuery plugin online (besides autocomplete) and add it to your web page. The course homepage has links to plugin sites, but you can also just search Google. The plugin must be sufficiently rich and complex to warrant full points. Try to find something that fits with your site. If time permits, add more than one! Warning: this will not be a quick and easy task. You will need to read someone else's documentation, maybe find some examples, and figure out how to download/link to their jQuery code. jQuery is about leveraging the developer's community, but this involves effort on your side.
    5. Extra Credit option 1: Implement more than one jQuery plugin! (must be complex enough, not just styles or buttons)
    6. Extra Credit option 2: Keep track of what your users search for, and use the results to rank the auto-complete results.
  5. As always, your code must be commented!
  6. On your default.htm page, provide a link to this lab (as always) and specific instructions on how to use your site. Tell me what new plugin(s) you used. Tell me how to test this lab - e.g. how can I see that your site meets the requirements for this lab? For instance, what to click, what to enter, etc.
  7. Ensure your page works with Chrome. Having it work on IE/Firefox is encouraged but not required.

NOTE: all HTML files must validate as HTML5 without errors for full credit.

Helpful Stuff

  1. AutoComplete - when you create your data source, provide just the raw name of your Perl file, e.g. "myautocomplete.pl". Don't try to specify any parameters here. The jQuery plugin will automatically send a parameter to your Perl program that is named "q". This parameter contains the letters that the user has already typed into the box - use this to customize the results that are returned.
  2. Brower's built-in autocomplete - be sure to turn off your browser's built-in autocomplete. In Chrome, Settings -> Advanced Settings -> Passwords and Forms -> "Enable Autofill..." (uncheck this). Preferences->Personal Stuff->Autofill (uncheck).

Deliverables

  1. All of your files for Lab04 should be in a folder called "it452/Lab04" (without the quotes) on the Web drive.
  2. Your main page for Lab04 should be called "index.html" (without the quotes) and placed inside the folder it452/Lab04.
  3. Your instructor will assume that your web pages are viewable at http://intranet.cs.usna.edu/~mXXXXXX/it452/Lab04/index.html where XXXXXX is your alpha number. You should check that this URL is viewable and that everything works correctly from a computer where somebody else is logged in.
  4. All files must be complete and saved to your Web drive before you submit the hardcopy of your assignment. Do NOT modify your files after you have submitted your assignment.
  5. Turn in the following hardcopy on or before the due date, stapled together in the following order (coversheet on top):
    1. Completed assignment cover and grading sheets.
    2. The first page of the output of the W3C validator, as run on the final version of your Lab04/index.html. This should show that your document correctly validated, but turn it in anyway if you can't get your page to validate.
    3. A printout of the source to your Lab04/index.html file that contains the jQuery code. Print 4-pages per page, double-sided if possible.
    4. Printouts of your external JavaScript files, if any. Do not print out plugin code!
    5. Printout of the source of the Perl/PHP files that you changed for this lab (autocomplete).

Addenda

  1. What URLs to use to get jQuery? You can either use:
    1. A direct link to jQuery from your HTML files: http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
    2. A local copy that you download. Just save the above javascript file into your lab's directory, and link to it instead.
  2. Autocomplete Plugin Code: Copy all of the plugin's files from my directory into your Lab04 directory:
       cp ~lmcdowel/public_html/it452/jquery/autocomplete/* ~/public_html/it452/Lab04/
    
    You'll want to include both the .css style sheet, and one of the .js files (.min.js or normal .js).