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.  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. 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)
    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. You need to insert example entries into the DB, and you should have at least 30 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 a few sites that list plugins, 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: Implement more than one jQuery plugin! (must be complex enough, not just styles or buttons)
  1. As always, your code must be commented!
  2. 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.
  3. Ensure your page works with Chrome or Firefox. Having it work on IE is encouraged but not required.

     

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

Helpful stuff

  1. For problems with perl, see tips about creating Perl files.
  2. As always, the “Error Console” in Chrome (or Firefox) is invaluable.
  3. On the command line, database errors will usually appear automatically.  From the browser, they won’t – instead insert this as a debug:
         print $DBI::errstr;
  4. Do not use the die() function alone – the error it generates can’t be seen from your web page.
  5. 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.
  6. Brower's built-in autocomplete – be sure to turn off your browser’s built-in autocomplete.  In Chrome, Preferences->Personal Stuff->Autofill (uncheck). In Firefox, Tools->Options->Privacy tab. Unclick "Remember what I enter in forms and the search bar"

 

 

Deliverables

1)      All of your files for Lab04 should be in a folder called "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 Lab04.

3)      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.

4)      Turn in the following hardcopy on or before the due date, stapled together in the following order (coversheet on top):

a)      Completed assignment cover and grading sheets.

b)      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. 

c)      A printout of the source to your Lab04 XHTML file(s) that contains all of the jQuery code. No need to include CSS or secondary XHTML pages. Truncated lines are not acceptable.  You could paste into Microsoft Word etc. if needed.

d)      Printouts of external JavaScript files, if any.

e)      Printouts of Perl (or PHP) file for autocomplete, and others if used for this lab.

 

Addenda

1)      What URLs to use to get jQuery? You can either use:

a)      A direct link to jQuery from your HTML files: http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

b)      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: /home/nchamber/public_html/jquery/autocomplete
You'll want to include both the .css style sheet, and one of the .js files (.min.js or normal .js).

2)      Very helpful CGI module: Add the following to the top of your Perl programs, and all kinds of errors will now appear in the browser instead of the browser replying just “CGI error”:
    use CGI::Carp qw(fatalsToBrowser warningsToBrowser);

3)      Remember also that, for IT452, this is required for all Perl scripts:
    use strict;