CS636 Homework 2 Java Packages, Pizza Project,XML, Maven, HTML Forms

Due Monday, Feb. 22, on Gradescope.

1. XML. Read the tutorial linked from the class web page. Find the error in $cs636/campus.xml and describe it.  Hint: try to display it in a browser.  Fix the error and show a snippet of XML around your fix in your homework paper.

2. Pizza1 on pe07. Command line development, environment variables, UNIX case.
a. Set up your Linux account at cs.umb.edu as specified in DatabaseSetup, which also covers setting up environment variable definitions (both at cs.umb.edu and on your home machine) for ORACLE_USER, ORACLE_PW, ORACLE_SITE, MYSQL_USER, MYSQL_PW, and MYSQL_SITE. Give the UNIX/Linux command to recursively copy $cs636/pizza1 to your own pizza1 directory under your cs636 directory.  Do the copy.
b. Cd to the pizza1/database directory and use runH2Script.sh createdb.sql to load the H2 tables, and runH2Script.sh showdb.sql to display them. Similarly for Oracle and mysql, as detailed in the README in the database directory. The Oracle and mysql cases depend on the environment variables you set up. Report "success" or description of problems.
c. After loading the database, try runOnH2.sh SystemTest to see it run the pizza1 system test.  Similarly, using the ORACLE_ environment variables you set up, try runOnOracle SystemTest.  Also try runOnMysql SystemTest. Also try TakeOrder and ShopAdmin using at least H2 .Report "success" or description of problems.

3 a. Pizza1 at home. Make sure your environment variables ORACLE_USER, ORACLE_PW, etc., are set up on your development system as shown in DatabaseSetup, Set up tunnels for the Oracle and mysql ports. Download pizza1.zip to your home machine and unzip it there to a convenient directory. Show the whole directory structure of pizza1 after “mvn clean” and then after "mvn package" while cd'd to your copy of pizza1, both on cs.umb and at home.  I'd use du for this on UNIX/Linux/mac, tree on PC.
b. Cd to the pizza1/database directory and use runH2Script createdb.sql on Windows (or runH2Script.sh createdb.sql on Mac/Linux) to load the tables into H2, and runH2Script showdb.sql or ant show-h2 to display them. Do the corresponding commands for that database. Note that you do not need to be logged into pe07 to do this. You can do it anywhere connected to cs.umb.edu by the Internet, with a running tunnel if off-campus. Similarly load and show mysql, after looking database/README to see the exact commands. Report success or any problems.
c. After loading the database, try runOnH2 SystemTest in the base directory to see it run the pizza1 system test on H2. Similarly, using the ORACLE_ environment variables you set up, and the tunnel, try runOnOracle SystemTest.  Also try runOnMysql SystemTest. Report success or any problems.

4. Java Packages. Review or learn about Java packages. There is a Java tutorial on packages. Your directory listing of the pizza project in problem 2 showed many subdirectories of src and bin. These are all related to the Java packages in use.
a. Find and quote the package directive in PizzaOrderDAO.java that places its code in its package. What is its directory under src? Under target/classes (for PizzaOrderDAO.class)?
b. For StudentService.java, what is the package for this code?  What methods of PizzaOrderDAO are called from here? Find and quote the import statement that allows this StudentService code to access PizzaOrderDAO methods without long names.
c. Try removing the import statement you found in b. and trying to compile the project (maven clean package). Report the resulting error.
d. What longer name could be used by StudentService to access the PizzaOrderDAO type without the import? Show the line of code that changes.

5.  Maven. Read the Maven in 5 Minutes tutorial we partially covered in Class04.pdf (6pp). This one is really too simple because the only dependency is junit.jar, used only for testing. Read the Mkyong.com tutorial. for an example with a dependency for production (non-test) code. We are using a slightly different plugin in pizza1 but the same result of an all-dependencies jar file. If interested, see stackoverflow discussion of these two plugins. Don't worry about the final step of making an "executable jar": we are content to use the all-dependencies jar in the ordinary way, as shown in runOnOracle, etc., and shown in this tutorial before the very end.

Compose a pom.xml for JdbcCheckup to build it to run on Mysql. There should be one dependency on mysql, which you can copy out of pizza1/database/pom.xml. Use the standard project structure, generated by mvn archetype:generate. using artifactId myjdbc and your choice of groupid with at least one period in it. Edit the the resulting pom.xml so that it builds an all-dependencies jar in the target directory.  Show the full archetype:generate command you used in your homework submission. Create a hw2 directory on pe07 by cd cs636, then mkdir hw2. Within this directory, run the same archetype:generate command and copy in your pom.xml. Add files runOnMysql.sh and runOnMysql.cmd (like those in pizza1).  In your homework submission, show the contents of runOnMysql.sh and output of a run of JdbcCheckup using one database (your choice) using your setup on pe07.

6.  HTML forms.  Read Murach on forms, pp. 114-123. Study this forms tutorial at http://www.w3schools.com (stop before the HTML5 Attributes part of the HTML Input Attributes chapter) and their tutorial on images. Look up <input> in their HTML reference, and look at the src attribute documentation. Visit http://boulter.com/ttt for a tic-tac-toe game with HTML user interface.
   a. Start playing, and then look at the page source.  Explain how the Xs and Os are displayed.
   b. How does the server know which square you clicked on?
   c. How many client-server round trips are needed to display this page? (see NOTE below for help)
   d. Observe how the cursor changes shape as you move the mouse around. What software is handling the moment-to-moment cursor painting?  Look at the HTML source. How are the various areas for special cursors specified by the HTML? That is, what HTML elements correspond to what cursor shapes?
  e. Do another move, note that the computer moves right away, but nothing ever happens after that until you do something. You can wait hours, and meanwhile hundreds of other users can be playing.  Where is the knowledge of your current position (X's and O's) kept all this time?  To answer this puzzle, look at the source, after a move and again after another move, and find out about hidden form fields.

NOTE: If you are new to web apps, and have trouble answering problem 5c, consider the email list form shown in Murach, pg. 35, with HTML on pg. 37 and CSS on pg. 39. To answer the original GET for the HTML page, the server sends back the index.html, and then the browser reads it, finds the link to the CSS, and requests the CSS file with another HTTP GET, and uses the received CSS to finish displaying the page. Thus there are two round trips involved in displaying this page.  Similarly, an image file requires an additional round trip, etc.

7. Creating an HTML Form. Use a plain editor like emacs or Wordpad to compose a web page register.html with page title "User Registration", contents entitled "Register for This Website", and a form, specifying name and email addresses in a text boxes, one above the other, with text to the left of each box "Name" and "Preferred Email", and a having a submit button.  Include the text of register.html and its display from a browser in your homework submission.  Note that we can't make this form work yet, just see it display itself. Don't use CSS here, so you can see the problem with alignment caused by the fact that we can't specify the width of the text even if we put it in a <span> or <label> because these elements can't have width specified.  This is a well-known problem. With CSS, we would be able to fix this. If interested, you can look at the relevant cs637 slides. The needed CSS is covered in cs637class4 (username cs637, pw PHP637).