Jeff Horn's CS 101 Home Page

CS 101 Web Construction, Summer 2006, Instructor: Jeffrey Horn

Assignment 6 "Video Voting"
- Handed out: Friday, November 30, 2007
- Due: Friday, December 7, 2007
- Purpose:
  1. Learn how to embed video in a web page.
  2. Learn about server-side CGI scripts.
  3. Learn how to use server-side CGI scripts (via "actions" in html forms).
- Sample Code from class
- Details:
  - Two parts to this assignment:
  - Part I, Embedding and Serving Video:
    - Find or create a minimum of three (3) short videos.
      - By short, I mean 10 MBytes or smaller file size, and maybe 5 minutes long MAX.
      - You can try any video format you like, but all that we have tested so far are ".mpg" and ".mpeg", which both refer to the MPEG 1 standard. It also "seemed" that ".avi" works as well. By "works", I mean that most of the media player plug-ins that are configured in each browser will play that format video. (Note that the playability of a particular video file also depends on the plug-in having the right "codec" (coder-decoder) that was used to create that video file! Video is not an easy medium to support across multiple browsers, operating systems, and platforms (e.g., computers, PDAs, cell phones, MP3 players, etc.), but that is what we are here to learn about!)
      - Create a separate web page for HW6 and embed your videos in them. ONE of the videos should autostart and loop. The other two should NOT start on initial page load.
      - To do this, you will need to host your video somewhere. You can host them on your own server or you can use a public video hosting service such as YouTube, or you can simply embed an existing video already being served somewhere (including on YouTube!):
        
        Existing video (already being served on web):
        
        E.g., <embed width = "300" height = "200" src= "http://www.tizag.com/files/html/htmlexample.mpeg" autostart="true" loop = "true" />
        
        On your own server: Just use the above <embed> tag but with your own URL. E.g., here is how to embed my own homemade video which is being served on myweb: <embed width = "300" height = "200" src= "http://myweb.nmu.edu/~jhorn/Videos/LetsMakeADeal_intro.wmv." autostart="true" loop = "true" />
        
        YouTube hosting: For this, you'll have to go to YouTube.com and get a free account, if you do not have one already, and follow the instructions for uploading a video. Once you have your video being served by YouTube, you can get the correct html code to copy and paste into your html file from the YouTube page for your video. Look on the right side for a field labeled "embed". Copy and paste the entire string from that window. You can try editing the string to customize the look of the embedded video, but the original string of html, as created by YouTube, should work in all browsers as is. (For example, see this YouTube video, and look on the right side of the page for the "embed" string.)
  - Part II, Voting on the CGI server:
    - This is the part where we rely on Scott Raiford's (a.k.a., Fluffy) server script to accept votes from users of our video web page. The users should be able to click on a "submit" button of some kind, (after entering their ratings), and the form data will be sent to Scott's server where his script will be run on the data (the ratings). His script will update the rating statistics (in effect, a tiny "web database") and then send back to your user's browser a dynamic web page (by that I mean the web page will be newly created from the updated data) showing the current results. The browser will then display this web page to the user.
    - To get this to work, you need to create an html form on your HW6 web page that shows each video with an associated text box for entering TWO RATINGs: "ORIGINALITY" and "ENJOYMENT VALUE", both on a scale of 0 to 10.
    - You need to add an "action" attribute to your form. This action will send the two numbers from the SIX input text boxes (two for each of three videos) to Scott's PERL script:
    - Here is an example of the "form" tag with the action for submitting to Scott's server. It will run his "vote.pl" PERL program on his server, www.sarten-x.com, when this form is submitted.
      - <form name="TempForm" action="http://www.sarten-x.com/cgi-bin/vote.pl">
      - And somewhere in the form you will also need a "submit" button to submit the form:
        
        <input type="submit" value="Send vote to Fluffy" /> (You can put whatever you want in the "value" attribute.)
    - To limit your user's choices in the six input boxes, you should try using SELECT boxes in which the user is limited to 11 choices: 0 through 10. Here is an example of a select box:
      [FrontPage Save Results Component]
      - And here is the code snippet for it (must go inside of a form, of course):
        <select name="D1">
            <option selected>A
            <option>B
            <option>C
            <option>D
            <option>E
        </select>
    - Your input boxes should be NAMED exactly as follows:
      - name="originalityX" for the originality rating of Video X, where X = 1,2, or 3.
      - name="enjoymentX" for the enjoyment rating of Video X, where X = 1,2, or 3.
      - For example, <select name="originality1">
      - It is important to get the names of the input boxes right, since Scott is writing his code to expect values for those six names.
  - Fluffy's Part: All the server stuff. We'll have to see! He can get the interface info he needs from the details above. But what he does with the tallies and stat.s, and how he chooses to display them, is up to him! We can give him some feedback in class. I hope he can give us links back to our web pages so that we can get to each other's videos. But I don't want that capability just yet anyway, because I want to keep the pages "secret" from each other, until after the due date! We'll check out the results at the final exam. (Tuesday, Dec. 11, 7pm, in our usual classroom, FYI)
Grading: Total 100 pt.s. The usual grading scale (i.e., 90 to 100 pt.s is an A, 80 to 89 pt.s is a B, etc.)
Turn-in Procedure: Put your web pages on the web (use your myweb.nmu.edu web site or your own web server account if you have one). Email me the URL for this assignment: (jhorn@nmu.edu). Keep it "secret"! Use an obscure URL.