Project 3

Due Nov. 29 (will overlap with Project 4)

Points 250

**(no student evaluation on this project)

PhP, Database and Using Web Services

https://developers.google.com/maps/articles/phpsqlsearch_v3?csw=1#findnearsql

EXTEND THAT WITH

Fancy infowindows: You can make your info windows more helpful by adding quick links for the user to zoom in to that location or get driving directions to/from that location.

You are going to extend your work from Project 2. There are 4 phases to this project described below

Phase 3.1 Advertising Applet

It is a Java Applet and it is implemented only using Java.

It performs File I/O with the Server the Java Applet is served/delivered from.

The Java Applet class(es) should be stored in the public_html directory of your server account. The name of the Applet class where the user can select a category and view the related Special of the Day should be called SpecialsOfDayApplet.

In particular, the interface will have a GUI that allows the user to select a category and this will result in a display of text information as well as image of the corresponding category special that day. The information about the special product for the selected category should include a breif description, product name and price as well as an image of the product. You MUST have a minimum of 3 categories the user can select from. For example, when selling computer systems and peripherals you could have categories of Memory, HardDrives, Monitors, PC Cameras, etc. When the user selects say the "PC Cameras" category, you will have information about the special of the day for "PC Cameras " category stored (this you had previously looked up performing file I/O with the server). Then you will display this information in the Applet including the image showing the special PC Camera. So, you may have the following information:

Product Name: "Intel's PC Web Cam"

Description: Intel's PC Web Cam is great for Web and Video Conferencing. Resolution is 256x256 and frame rate is 30 fps.

Price: $89.99

image: filename=cam.gif (this you actually display)

NOTE: All of the above information must be read into your Applet program from a file stored on the server. Call this file "specials.txt" This information can not be hard-coded into the Java code.....it must be read in from a file. You may use more than one file, one for each of your categories. Or you can store all the specials in a single file.

You will need to create a new HTML page that includes the Java Applet. It should have the same design look and feel as the pages in your Project 1 web-site and you should have a link(s) from your Project 1 web-site to this new page (hence making it an integral new part of your evolving web-site).

Requirements for Java GUI:

You must creatively format the layout of the Applet so that it is easily understood by any user without instructions that they are to select a category from which to see the corresponding "special of the day".

You must have a minimum of three categories the user can select from.

There must be an area to display both the textual and image information related to the "special of the day" selected by the user. (text should include product name, description and price).

Be careful of the initial and revisited state (e.g. when reload button hit) the applet appears in ....so that the category selected and the "special of the day" information always correspond to each other. Hence, you should not show a category selected and have a blank area for "special of the day". Nor should you have the wrong "special of the day" information displayed for a particular category.

Phase 3.2 Internationalization

You are to investigate the use of some kind of "gadget" to perform translation services. In the past we have used Gadget Message Bundles for internationalization. There are some unfortunate problems with the use of this tool in its incorporation into a webpage. You are to come up with a different solution and propose it AND document your use.

You should apply the internationalization to the content of the main page and the navigation "bars"/links in your site. You only have to do it for the main navigation bar.

The ideal of the internationalization is two fold (taken from how Gadget message bundles work):

Software that senses the language of browser (English, Hindi, Spanish,etc) and picks up the corresponding language content for delivery and displays it.
Probably this will include some special (xml?) markup of your source code for your entrance page text content ---so it gets the correct language content -- AND the main navigation bar.
A probably diffferent tool will be used to take your English content and translate it into at least 2 other languages which must include spanish.

YOU ARE NOT to use Google message bundles but, for an example on it take a look at (http://code.google.com/apis/gadgets/docs/i18n.html#Hello_World) for informaiton on google about this process.

DO NOT USE THE FOLLOWING...>THIS IS A GOOGLE GADGETS EXAMPLE

Phase 3.3 Flash Embedding

You are to use SWFObject JavaScript library for Flash embedding and control....you are to create a flash. This content is from my Book on OpenSocial Programming

Unfortunately, not all the OpenSocial containers support the gadgets.flash object. For example, both MySpace and hi5 do not currently support it. If this is the case, you can use the solution presented here that utilizes the SWFObject JavaScript library. This is a free-for-use library found at http://code.google.com/p/swfobject/. Listing 7-19 shows an XML application that uses this library to embed a Flash file.

Listing 7-19 Application Embedding Flash with the SWFObject Library

<div id='heading'></div>
<hr size="1px"/>
<div id='main'></div>
<hr>
    <script src="http://UServer.com/swfobject.js"></script>
<script type="text/javascript">
    swfobject.registerObject("movie", "9.0.0", "expressInstall.swf");
</script>
<div>
    <object id='movie' classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="http://UServer.com/UFlash.swf" />
        <object type="application/x-shockwave-flash"
                             data="http://UServer.com/UFlash.swf" width="780"
               height="420">
        </object>
   </object>
</div>

The code in Listing 7-19 can be broken up into the following steps:
1. Load the SWFObject JavaScript Library:
<script src="http://UServer.com/swfobject.js"></script>
This code loads the SWFObject JavaScript library, which must be uploaded to the developer’s server.

2.       Embed the Flash content:
<object id='movie' classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="http://UServer.com/UFlash.swf" />
        <object type="application/x-shockwave-flash"
                data="http://UServer.com/UFlash.swf" width="780"
                height="420">
        </object>
      </object>

The following are the required attributes of the object tags shown in this code:
*   classid — The outer object element only. The value is always clsid:D27CDB6E-AE6D-11cf-96B8-444553540000.
*       type — The inner object element only. The value is always application/x-shockwave-flash.
*       data — The inner object element only. This defines the URL of a SWF file.
*       width — Both object elements. This defines the width of a SWF file.
*       height — Both object elements. This defines the height of a SWF file.
                     The listed param element is required and specifies the following:
*       movie — The outer object element only. This defines the URL of a SWF file.

3. Register the Flash content with the SWFObject library:
<script type="text/javascript">
swfobject.registerObject("movie", "9.0.0", "expressInstall.swf");
</script>

The first parameter of the registerObject method is the ID in the markup of the object associated with the Flash content. The last parameter is optional, and is used to activate the Adobe Express Install application (http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75). It specifies the URL of the express install SWF file. Express Install displays a standardized Flash plug-in download dialog instead of the application Flash content when the required plug-in version is not available. A default expressInstall.swf file is packaged with the library. It also contains the corresponding expressInstall.fla and AS files (in the SRC directory) to allow developers to create their own custom Express Install experience.

More Configuration Options

There are additional attributes and parameters that are useful in creating a custom Flash experience. For the Object element, these include id, name, class, and align.
In addition, the following are optional Flash-specific param elements (see http://www.adobe.com for more details on Flash): play, loop, menu, quality, scale, align, wmode, bgcolor, base, swliveconnect, flashvars, devicefont, allowscriptaccess, seamlesstabbing, allowfullscreen, and allownetworking.
You may want to consider adding alternative content inside of the Object element. If the Flash plug-in is not supported, this alternative content will be displayed. Here is an example:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="http://UServer.com/UFlash.swf" />

        <object type="application/x-shockwave-flash"
                data="http://UServer.com/UFlash.swf" width="780"
                height="420">

<p>Alternative content</p>
</object>
</object>

Phase 3.4 File Upload

You are to find and use a PHP library for reciept of server-side file uploads sent from a browser form using a multi-part HTML form to send the data as follows:


Select Picture:

Evaluation Guidelines

Deliverables

Update your web-site with the Java Code and update HTML appropriately. Fully test out program. Post on the server. I WILL TAKE OFF POINTS if you have not sufficiently commented your Java Code and YOU are responsible for testing the pages with the Applet work on both IE and Netscape (I will take off points if it does not work on both properly).
AppletWorking.doc: Grab screen shot of web-page containing the Java Applet and turn in this hard-copy with a cover-page with the following information: Your Name, Your email address, The URL of the web-site, date.
AppletWorking.doc: grab screen shots of the web-page containing the Java Applet after user has selected each unique category, illustrating the new information (text and image) about the corresponding "special of the day". Hence if you have 3 categories, you will have 3 printouts here. If you have 10 categories, you will submit 10 printouts.
CodeDescription.doc: A one page description of how you:
- 4.1) Applet Description structured the code...how it works, what each class represents and its methods do.
- 4.2) JavaScript Flash code - how it works, link to library
- 4.3) XML Intenationalization code AND Process - describe what you did for the XML Internationalization part
- 4.4) PHP file upload - how it works, link to library
specials.txt: Printout of specials.txt file used.
*.java: Printout of the Java code (fully commented).
*.xml: XML files for internationalization, and containing html file
*.js (and/or .html) for javascript used for flash library coding
*.php file(s) used in file upload part and link to php library you used
Upload the files to blackboard project: all XML, HTML, JS files, PHP files, ll Java files *.java (including SpecialsOfDayApplet.java), AppletWorking.doc, specials.txt. YOU SHOULD KEEP THE FILENAMES I HAVE DESIGNATED.