Overview

First, you will create a JavaScript function to modify the contents of a table. The goal is to gain experience using JavaScript to manipulate the DOM of an existing web page.

Second, you will create a form for inserting rows into a table. The goal is to gain experience connecting forms to JavaScript functions and further experience using the DOM to create new HTML elements.

Third, you will modify the form for inserting NBA player data so that it generates content dynamically. The goal is to better understand the differences between client-side and server-side processing.

Part I: Modify thd DOM

Adding Hyperlinks (20 points)

Task Overview: Add JavaScript to an NBA team web page to convert the player names in the roster to properly formatted hyperlinks. First, we will extract each player's name. Note that the player's name is always in the second td of each table row of the roster. Also, note that we must ignore the first row which contains the table headers (th). We will parse the player's name by removing all special characters, converting characters to lower case, and separating the full name into components (first and last). Then, we will create a hyperlink of the form <a href="last_first.html">full name</a>. Finally we will replace each player's full name with the appropriate hyperlink shown above.

• Download and save ny_knicks.html to a folder called project2.
• Immediately above the closing body tag, add a script tag.
• Inside the script tag add JavaScript to perform the task described above. Use the following template as a guide:

  // Get only the roster section
  var roster = document.getElementById("roster"); 
  // Get all the rows of the roster table
  var rows = roster.getElementsByTagName("tr");
  // Loop for each row, but start with the 2nd row
  for (var r = 1; r < rows.length; r++) {					
  	// Fetch the individual row (code given below)
  	var row = rows[r];
  	// Use getElementsByTagName to get all the td tags (code given below)
  	var cols = row.getElementsByTagName("td");
  	// Get the second td tag, which stores the full name (code given below)
  	var secondTD = cols[1];
  	// Get the innerHTML of the second td tag and store it as a string called fullname
  	
  
  	// Use the JavaScript replace to replace apostrophes and periods with an empty character ('')
  	// Use the JavaScript toLowerCase to make sure the full name is all lower case letters
  	// Use the JavaScript split function to break the string into array components
  	// Assume the first component is the first name
  	// Assume the second component is the second name, which may not be true all the time.
  	// Use String concatentation (+) to make the URL string (last + "_" + first + ".html")
  	// Use createElement to make a new hyperlink element
  	// Use createTextNode to make a new text node for the fullname, i.e., createTextNode(fullname)
  	// Use appendChild to append the text node inside the hyperlink element
  	// Use setAttribute to set the "href" attribut to the URL string above
  	
  	// Remove the text node of the second td tag (code given below)
  	var old = secondTD.childNodes[0];
  	secondTD.removeChild(old);
  	
  	// Use append child to append the hyperlink element inside of the second td tag
  }
  

Replacing Text (20 points)

Use your experience from the first part, to further modify the table by replacing the player's position (PG, SG, SF, PF and C) with the full name (Point Guard, Shooting Guard, Small Forward, Power Forward and Center).

Part II: Forms & JavaScript (30 points)

Right below the roster table in ny_knicks.html, create an HTML form for inserting a new player into the table. Use input text elements to enter the player's NO., NAME, WEIGHT and AGE. Use a drop-down menu (select and option tag)to enter the player's POS, HEIGHT in feet, and HEIGHT in inches. Clicking the submit, but should trigger a JavaScript function that inserts the submitted values as a new row in the table above.

Help: The idea is to create six text nodes for NO., NAME, POS, AGE, HEIGHT, and WEIGHT. Then, append each text node into newly created td elements. Then, append each td element into a tr element. Finally, append the tr element into the roster table. To get the roster table, use the model in Part I, i.e., get the roster by ID and then get the table by TagName.

Grading

• 15 points for implementing the form and properly using the required HTML form elements.
• 15 points for implementing the JavaScript to properly perform the row insertion.

Part III: Forms & PHP (30 points)

Using the form from Part II, we will disconnect the form from the JavaScript and instead connect it to a PHP script running on the server. Instead of modifying the actively loaded page in the browser, which is truly stored temporarily, we will modify a file on the server, which will allow newly inserted players to be permanently added.

Save ny_knicks.html as ny_knicks.php and then make the following modifications:

1. Remove any JavaScript connected to the form, i.e., eventListeners or onclick attributes.
2. Make sure your HTML form has an actual form tag and then add the attribute action="append.php" and method="get".
3. Make sure your HTML form has a submit button, i.e., <input type="submit">
4. Be sure all your form elements have unique names, i.e., name="weight", name="position", etc.
5. Add a new password field to the form.
6. Create a file called append.php.
7. In append.php, use the $_GET variable to fetch all the submitted form values.
8. Use PHP string concatenation to print the values formatted as a table row. For example, if the user types in Carmelo Anthony's info then the table row would look like this: <tr><td>7</td><td>Carmelo Anthony</td><td>SF</td><td>29</td><td>6-8</td><td>230</td></tr>
9. Modify your append script so that it only produces output if the submitted password is "abc123"
10. Test your script to make sure it works before continuing
11. Modify your append script so that instead of printing the table row, it appends the string to a file called data.html (see PHP's file_put_contents).
12. Create a new file called data.html and copy the following table row, which will be the only contents:
    <tr><td>59</td><td>Eric Breimer</td><td>PF</td><td>39</td><td>6-4</td><td>248</td></tr>
13. Modify ny_knicks.php by adding the following code directly before the roster's closing table tag, i.e., </table>:

    <?php require("data.html"); ?>
    

14. Note that ny_knicks.php will change as you append new rows to data.html.
15. Be sure to upload all your files to the server in a folder called project2.
16. In order for append.php to work, you must run it on a PHP enabled server (sienacs.com) and the file data.html must have write permission for owner, group and others (code 664). After uploading data.html to the server, set the permissions on the server using your FTP client.
    Setting permissions with WinSCP
    Setting permissions with FileZilla

Grading

• 3 points for properly connecting the form to the append.php script
• 5 points for properly "getting" the form values by given each form element a unique name and properly using the PHP $_GET variable.
• 5 points for properly using the password to "secure" your application.
• 3 points for properly formatting the output of your new table row
• 3 points for properly using the file_put_contents function to write to the file
• 3 points for properly using the require function to dynamically insert rows into ny_knicks.php.
• 3 points for properly setting the permission of data.html so that the append.php script can write to it.
• 5 points for making sure all your files are located at http://yourid.sienacs.com/project2