1 / 44

Assignments

Assignments. Honor code notice: your work must be your own. If copying is detected, the code requirements will be applied. Assignment #1 – learning some HTML Assignment #2 –HTML forms & data validation by Javascripts Assignment #3 –Table layout & Javascripts

apollo
Download Presentation

Assignments

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Assignments Honor code notice: your work must be your own. If copying is detected, the code requirements will be applied.

  2. Assignment #1 – learning some HTML Assignment #2 –HTML forms & data validation by Javascripts Assignment #3 –Table layout & Javascripts Assignment #4 –XML, CSS, DTD, and HTML dynamic data access Assignment #5 –Javascript Assignment #6 –Javascript Assignment #7 –Tomcat & JSP Assignment #8 –Tomcat & JSP Assignment #9 –MS Access & SQL Assignment#10-HTTP request/response through telnet Project step 1: Java Server Pages data base setup Project step 2: Java Server Pages data base … Project step 3: Java Server Pages data base … Project step 4: Java Server Pages data base …

  3. Assignment #1 – Learning some HTML on your own

  4. Assgt-#1-Introductory HTML assgt on Frames The following are flags: The following area is used to display flag selected. US-flag-link Canadian-flag-link Frame-1 Frame-2 This is the INITIAL view when the page is loaded, before Any link is clicked.

  5. Clicking US-flag-link sends this page in Frame-2 The following are flags: Image of US flag is shown here US-flag-link Link back to initial Configuration as on previous slide Canadian-flag-link Frame-1 Frame-2 When Canadian link is clicked, just gives Canadian flag.

  6. This assignment requires you to read up on frames and obtain an understanding of the following tags for frames: Frameset tag [Note: there is no <body> tag in frameset page.] Cols attribute for framesets frame src attribute frame name attribute Target attribute for hyperlinks Read: section on frames in Sebesta and example on pages 66-68. Web sites like webmonkey.com are also useful for html in General.

  7. There will be six files: f0.html - initial frameset page f1.html - initial left hand side frame f2.html - initial right hand side frame image1.gif image2.gif image1.html – page with image1 embedded & hyperlink

  8. Hand in hardcopy of your work as: Word document with brief description of assignment. Stapled Neat Test the results – label what each test is supposed to illustrate and whether it succeeds or if it fails, how it fails. Use ctrl-alt-print screen keyscreen keys to capture the different browser windows that describe how work was properly tested. Note: there will be multiple files in your computer folder after you do the assgt: one file for the original frameset page, one for each frame, one for each image, and an additional html page that contains the us.gif Image and a link back to the original frame-2 page.

  9. Assignment #2 HTML Forms & simple Java scriptlets to validate data.

  10. Relevant reading Xue Bai page 48 project2-1 – study javascript used there. Sebesta p. 71 [text widget], p. 76 [menu widget], p.78 [Textarea], p. 167 How to set IE [Internet Explorer]debugging preferences p. 192-194 Javascript example [more complex than ours but shows how to invoke function when submit button is clicked] – p. 194 top especially – but used qualified naming as done in class When using the IE debugger (or developing the html pages) it is very helpful to use a tool like TextPad (for Java) ti display the html page source. TextPad color-codes the html keywords, and also indicates the line & column numbers where the cursor is positioned in the text. This helps find errors, which are reported by the IE debugger in terms of line & column no.s.

  11. JS for event-driven function calls for submit or button events. in Form <input type=submit name=mySubmit /> in JS <script> document.myForm.onsubmit=functionName </script> in Form <input type=button name=button1 /> fully qualified name, unlike submit <script> document.myForm .button1.onclick=functionName </script> in JS <input type=button name=button2 onclick= functName ( ) /> in Form cannot do this for onsubmit [must be separate scriptlet] note ( )'s in function Contrast buttons & onclick: Alternatively

  12. Assgt-#2 - Form with basic widgets & Javascript validation IT Browser including location bar & display url onbrowser: Form data shown here only JS Tests are both passed Name Test if Name field is empty Age Test if Age field is numeric Why I want to study IT I want to study IT because… Standard Submit & reset buttons submit clear

  13. IT Name To test if this field is empty, imitate the Javascript described in Xue Bai example Age To test if this field is numeric – that is made only of digits – imitate Xue Bai Javascript Why I want to study IT I want to study IT because… This is simple Textarea widget with default content as shown. Major This is menu item – with two options: IT and CS. submit clear These are standard submit & reset buttons

  14. IT url onbrowser: Form data should be transmitted only if Tests passed Name Age Why I want to study IT I want to study IT because… Major submit clear Submit should Fail if either input field fails its test. If submit fails, the url should remain same and have no query string. If submit succeeds, url will include query string containing url-encoded Form data from the widgets & widget [variable] names.

  15. Hand in: Word document with brief description. Stapled Neat Use ctrl-alt-print-screen keys to copy the different browser windows you encounter that describe how the work was properly tested. Source code also. Note: Test properly – for empty name field, non-numeric age field, as well as good name and age fields. Label test cases and their results. If you cannot get something to work right, then report those what happened – eg by Internet Explorer debugging message.

  16. Assignment #3 – How to use: Tables for neat page Layout Style attributes (properties/values) to precisely control element appearance Javascript for simple Dynamic Html effects

  17. form checkboxes in nested 2x3 table radio buttons in nested 2x3 table System administration Programming Network Security IT CS IS submit reset Shifting Title Style Name Interests Major

  18. top row covers 2 cols & background is gray title's style properties changes when cursor moves over or off title field color is cyan font is red & bold System administration Programming nested 2x3 tables backgrounds are gray - fill 100% of each cell table border is 0 Network Security IT CS IS submit reset table border color & size Shifting Title Style Name Interests Major

  19. Implement the table & effects shown. (1) First do so manually - where you write the code yourself. (2) Can use Microsoft FrontPage to automatically generate the Html, but without the JS –but FrontPage does not have Javascript. Also – if you use FrontPage, delete any extra tags you don't understand that it puts in for you.

  20. References & notes: Sebesta Table tags: <table>, <tr>, <th> p. 55-57 width [% ] & border [units] attributes colspan attribute for cells p. 57-58 align attribute for cells p. 61 top The styleattribute has many property/value pairs. See next slide.

  21. Inline styles – can be used withmost elements [tables, cells, buttons, etc] style="background-color=cyan" style="color=cyan" - for font color style ="font-weight: bold" style="border-color=orange" - for table border style ="font-weight: bold ; color=cyan " - altformat ok Examples: <th style="background-color=red" > … <input type=text style = "background-color: red; color:white" /> <table style="border-color=orange" > <tablestyle="background-color=red" > attribute property value

  22. Inline elements can be grouped with span & id <span> encompasses enclosed element element id <p> This is a test <br> Hello there ! </p> event-driven function call <span id ="span1" onmouseover=fn1( ) > </span> enclosed text Dynamically change style properties get element object function fn1() { e=document.getElementById("span1") e.style.color="red"; } change object style

  23. or… <p> This is a test <br> <span id ="span1" style="color: purple" style="fontSize: 16pt" onmouseover=fn1() > Hello there ! </span> </p> can define styles here

  24. DOM API to access html elements These are optional remarks Not required for assignment. To Dynamically change html element contents: get html element function fn1() { e = document.getElementById("span1") e.style.color="red"; e.firstChild.data="What's happening here?" } to change element style to change element contents

  25. …piece of JS function triggered by condition in a <span> …</span> with <table> element inside. These are optional remarks Not required for assignment. … e=document.getElementById("span2") e.firstChild.style.color="red" e.firstChild.style.fontSize="18pt" e.firstChild.border=5 changes font styles of table element changes borderattribute of table

  26. Assignment #4 – How to: Structure data via XML Define XML grammar via DTD Access XML data from HTML file Specify styles via external CSS Due 2 weeks from this class. Each file is 25 units towards score for total value of 100 units. Late policy: 15 points off if Late one class. Challenge variation at end.

  27. Paragraphs,table, body follow CSS class rules HTML defines content layout -& references CSS & XML files HTML table below pulls data from XML file and Shows Student Names & GPAs. HTML grabs XML data – given in separate XML file to make table contents Cascading Style Sheet governs paragraph, body, and Table tags. XML grammar defined in separate DTD file Document Type definition file defines XML syntax.

  28. xml data file CSS rules file DTD syntax file File relationships Html file grabs xml data external style rules applied to html file html file xml structures data syntax rules for xml data

  29. 1. HTML page should layout data as shown. The styles are named classes imported from a CSS file. HTML table below pulls data from XML file and Shows Student Names & GPAs. 2. CSS style sheet should have named classes for the body, table, and paragraphs presentation. 3. An XML data file should structure the data - where students are the repeated entities and have two characteristics – Name & GPA. Cascading Style Sheet governs paragraph, body, and Table tags. 4. The XML file should reference a Document Type Definition file that specifies the simple grammar for such an XML structure.. Document Type definition file defines XML syntax.

  30. Body, table & paragraph elements have styles from namedclasses in external style-sheet Background colors are used for each elt, with non-default font colors & non-zero table border. Cols 1 & 3 are just Html labels but Cols 2 & 4 are retrieved from XML file. If data added/removed from XML file, the table html is automatically regenerated to adapt to the new data by the browser. Empty field accepted because DTD allowed it. Test the different effects – they manifest DTD impact ! HTML table below pulls data from XML file and Shows Student Names & GPAs. Cascading Style Sheet governs paragraph, body, and Table tags. Document Type definition file defines XML syntax.

  31. b.xml c.css d.dtd syntax for file links Internal html id for data source: <table class="type1" datasrc ="#sList"> Body: <xml id="sList" src = "b.xml" /> Head: <link rel = stylesheet type = "text/css" href = "d.css" > </link> Near top: <!DOCTYPE studentList SYSTEM "d.dtd"> a.html Top-level or root entity is: <!ELEMENT studentList (student+)>

  32. The following slides show examples of each type of file and how they interoperate. When you do this HW, be aware that the pieces can be tested relatively independently – thus you can test the xml [without the reference to the grammar file]. and can test the html & css link before you have the Html & xml comb working. Even if the entire package does not work, you can surely submit working peices

  33. Simple xml data file: name of root element <?xml version="1.0" encoding="UTF-8" ?> <!-- Filename - warehouse.xml --> <!DOCTYPE warehouse SYSTEM "grammar.dtd"> <warehouse > <part> <nameOfPart> transmission </nameOfPart > <costOfPart> 1.2 </costOfPart > </ part > < part > < nameOfPart > carburetor </nameOfPart > <costOfPart > 4.0 </costOfPart > </ part > </warehouse > name of governing DTD file that defines warehouse syntax

  34. exactly one many lets say 0 or 1 costs <part> <nameOfPart> </costOfPart > </address > <manufacturer > more complex hierarchy </phone > </email > <nameOfManufacturer> Tree structure of XML data. <warehouse >

  35. Simple dtd grammar file: broadest or root category Repeated instances <?xml version="1.0" ?> <!ELEMENT warehouse (part+)> <!ELEMENT part (nameOfPart, costOfPart?)> <!ELEMENT nameOfPart (#PCDATA)> <!ELEMENT costOfPart (#PCDATA)> Subordinate fields 0 or 1 repetition of data only in xml file - else get DTD error Terminal or bottom element fields

  36. More complex dtd grammar file: deeper nesting <?xml version="1.0" ?> <!ELEMENT warehouse (part+)> <!ELEMENT part (nameOfPart, costOfPart?, manufacturer)> <!ELEMENT nameOfPart (#PCDATA)> <!ELEMENT costOfPart (#PCDATA)> <!ELEMENT manufacturer (nameOfManufacturer, address , phone , email ) Etc for rest…

  37. Simple html data capture file: internal name for xml data src: b.xml Link to style class <HTML><HEAD> <link rel = stylesheet type = "text/css" href = "d.css" </link> </HEAD> Link to xml data <BODY class = "class4"> <xml id="internalName" src = "b.xml" /> <p class=class3> remarks </p> <table class="class2" datasrc = "#internalName " > <tbody> <tr> <td> ...label... </td> <td> <div dataFld = "xmlElement-1" /> </td> <td> ...label... </td> <td> <div dataFld = "xmlElement -2" /> </td> </tr> </tbody> </table> </BODY> </HTML> Data retrieval of xml element value. The name is for an XML element.

  38. Simple html data capture file: Style classes referenced Note <tbody> tags single row element – others generated automatically by browser Link to style class <HTML><HEAD> <link rel = stylesheet type = "text/css" href = "d.css" </link> </HEAD> <BODY class = "class4"> <xml id="internalName" src = "b.xml" /> <p class=class3> remarks </p> <table class="class2" datasrc = "#internalName " > <tbody> <tr> <td> ...label... </td> <td> <div dataFld = "xmlElement-1" /> </td> <td> ...label... </td> <td> <div dataFld = "xmlElement -2" /> </td> </tr> </tbody> </table> </BODY> </HTML>

  39. Simple CSS style classes file: one choice of style for paragraph tag p.class1 { font-style: italic; color: red } table.class2 { padding: "10pt" ; border: "10pt"; background:red } p.class3 { font-size: "25pt"; font-family: 'Courier New'; } body. class4 { ..... } choice of style for table another choice of style for paragraph tag Be sure to save as: "someName.css" Semi-colons !

  40. References & notes: Sebesta: XML pages: 291-306, 318-320, 328-329 CSS pages: 90-100 Following site is useful for tutorials: www. w3schools.com/xml PDF notes & examples on my site – under HTML-b - see pages 8-34 [skip PDF pages 9-14 which are out of order] for detailed discussion of CSS and XML. I am using the numbering of pages generated by PDF - NOT the page numbers written on the pages. Some key examples to look at are: HTML - exampleF03b1.html - exampleF03b3.html - exampleF03b5.html & sheet2.css XML - student1,2,3,4.xml XML data binding - partsList.xml, parts.html DTD - student5.xml, student5DTD.dtd The examples are under: Html-examples directory on my web site & for the XML under: Html-examples >XMLexamples directory

  41. Replace leaf Name with: <Name> <firstName> </lastName > Challenge Variation HTML table below pulls data from XML file and Shows Student Names & GPAs. HTML table content will look like – with data from different levels in the tree Cascading Style Sheet governs paragraph, body, and Table tags. You will have to independently find out how to do this in html Document Type definition file defines XML syntax.

  42. Notes on Challenge <roster> Outer table - with single row - has cell for the GPA - like in basic example. <student> table datasrc = roster <Name> <GPA > cell: dataFld=GPA <firstName> <lastName > table datasrc=roster datasrc=name Nested inner table is inside 2nd cell in the single row of the outer table.The inner table itself has same format as the outer table…but with the extra datasrc attributes shown. cell: dataFld=firstName cell: dataFld=lastName IOU:Adam Saponara

  43. References & notes: Sebesta: Following site is useful for tutorials: www. w3schools.com/xml Converter Multi-verter Guided form

More Related