assignments honor code notice: your work must be your own. if copying is detected, the code...
Post on 19-Dec-2015
217 views
TRANSCRIPT
Assignments
Honor code notice: your work must be your own. If copyingis detected, the code requirements will be applied.
Assignment #1 – learning some HTMLAssignment #2 –HTML forms & data validation by JavascriptsAssignment #3 –Table layout & JavascriptsAssignment #4 –XML, CSS, DTD, and HTML dynamic data accessAssignment #5 –JavascriptAssignment #6 –JavascriptAssignment #7 –Tomcat & JSPAssignment #8 –Tomcat & JSPAssignment #9 –MS Access & SQLAssignment#10-HTTP request/response through telnetProject step 1: Java Server Pages data base setupProject step 2: Java Server Pages data base …Project step 3: Java Server Pages data base …Project step 4: Java Server Pages data base …
Assgt-#1-Introductory HTML assgt on Frames
The followingare flags:
US-flag-link
Canadian-flag-link
The following area is used to display flag selected.
Frame-1 Frame-2
This is the INITIAL view when the page is loaded, beforeAny link is clicked.
Clicking US-flag-link sends this page in Frame-2
The followingare flags:
US-flag-link
Canadian-flag-link
Frame-1 Frame-2
Image of US flag isshown here
When Canadian link is clicked, just gives Canadian flag.
Link back to initial Configuration as onprevious slide
This assignment requires you to read up on frames and obtainan understanding of the following tags for frames:
Frameset tag [Note: there is no <body> tag in frameset page.]Cols attribute for framesets
frame src attributeframe 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 inGeneral.
There will be six files:
f0.html - initial frameset pagef1.html - initial left hand side framef2.html - initial right hand side frame
image1.gifimage2.gif
image1.html – page with image1 embedded & hyperlink
Hand in hardcopy of your work as:
Word document with brief description of assignment.StapledNeat
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 dothe 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.gifImage and a link back to the original frame-2 page.
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 usea tool like TextPad (for Java) ti display the html page source. TextPad color-codesthe 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.
JS for event-driven function calls for submit or button events.
<script> document.myForm .button1.onclick=functionName </script>
<input type=button name=button1 /> in Form
in JS
<input type=button name=button2 onclick= functName ( ) /> in Form
<input type=submit name=mySubmit />
<script> document.myForm.onsubmit=functionName </script>
in Form
in JS
Contrast buttons & onclick:
fully qualified name, unlike submit
cannot do this for onsubmit[must be separate scriptlet] note ( )'s in function
Alternatively
Assgt-#2 - Form with basic widgets & Javascript validation
Test if Name field is emptyName
Age
Why I want to study IT
submit clear
I want to study IT because…
Test if Age field is numeric
Standard Submit & reset buttons
url on browser: Form data shown here only JS Tests are both passed
Browser including location bar & display
IT
To test if this field is empty, imitatethe Javascript described in Xue Bai example
Name
Age
Why I want to study IT
submit clear
I want to study IT because…
To test if this field is numeric – that is made only of digits – imitate Xue Bai Javascript
This is simple Textarea widget with defaultcontent as shown.
These are standard submit & reset buttons
IT Major This is menu item – with two options:
IT and CS.
Name
Age
Why I want to study IT
submit clear
I want to study IT because…
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.
url on browser: Form data should be transmitted only if Tests passed
IT
Major
Hand in:
Word document with brief description.StapledNeat
Use ctrl-alt-print-screen keys to copy the different browser windowsyou 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.
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
Shifting Title Style
Name
Interests Programming
Network Security
System administration
Major CS
IS
IT
submit reset
form
checkboxes in nested 2x3 table
radio buttonsin nested 2x3 table
Shifting Title Style
Name
Interests Programming
Network Security
System administration
Major CS
IS
IT
submit reset
top row covers 2 cols & background is gray
title's style properties changes when cursor moves over or off title
nested 2x3 tables backgrounds are gray- fill 100% of each celltable border is 0
field color is cyanfont is red & bold
table border color & size
Implement the table & effects shown.
(1) First do so manually - where you write the code yourself.
(2) Can use Microsoft FrontPage to automatically generatethe 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.
References & notes:
Sebesta
Table tags: <table>, <tr>, <th> p. 55-57width [% ] & border [units] attributescolspan attribute for cells p. 57-58align attribute for cells p. 61 top
The style attribute has many property/value pairs.See next slide.
Inline styles – can be used with most elements [tables, cells, buttons, etc]style="background-color=cyan"
style="color=cyan" - for font colorstyle ="font-weight: bold"style="border-color=orange" - for table borderstyle ="font-weight: bold ; color=cyan " - alt format ok
Examples:<th style="background-color=red" > …<input type=text style = "background-color: red; color:white" /><table style="border-color=orange" ><table style="background-color=red" >
attribute property value
Inline elements can be grouped with span & id
<p> This is a test <br> Hello there ! </p>
Dynamically change style properties
function fn1(){ e=document.getElementById("span1") e.style.color="red";}
<span> encompassesenclosed element event-driven
function call
enclosedtext
element id
get element object
change object style
<span id ="span1" onmouseover=fn1( )>
</span>
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
DOM API to access html elements
To Dynamically change html element contents:
function fn1(){ e = document.getElementById("span1") e.style.color="red";
e.firstChild.data="What's happening here?"
}
to change element style
get html element
to change element contents
These are optional remarksNot required for assignment.
…piece of JS function triggered by condition in a <span> …</span> with <table> element inside.
…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 border attribute of table
These are optional remarksNot required for assignment.
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.
Name Jones GPA 2.5
Name Smith GPA
Name Gates GPA 1.2
Name Newman GPA 4.0
HTML table below pulls data from XML file andShows Student Names & GPAs.
Cascading Style Sheet governs paragraph, body, and Table tags.
Document Type definition file defines XML syntax.
Paragraphs,table, body follow CSS class rules
HTML grabs XML data – given in
separate XML file to make table contents
XML grammar defined in separate DTD file
HTML defines content layout -& references CSS & XML
files
html file
DTD syntax file
xml data file CSS rules file
Html file grabs xml data
xml structures data
syntax rules for xml data
external style rules applied to
html file
File relationships
Name Jones GPA 2.5
Name Smith GPA
Name Gates GPA 1.2
Name Newman GPA 4.0
HTML table below pulls data from XML file andShows Student Names & GPAs.
Cascading Style Sheet governs paragraph, body, and Table tags.
Document Type definition file defines XML syntax.
1. HTML page should layout data asshown. The styles are named classesimported from a CSS file.
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.
4. The XML file should reference a Document Type Definition file thatspecifies the simple grammar for such an XML structure..
Name Jones GPA 2.5
Name Smith GPA
Name Gates GPA 1.2
Name Newman GPA 4.0
HTML table below pulls data from XML file andShows Student Names & GPAs.
Cascading Style Sheet governs paragraph, body, and Table tags.
Document Type definition file defines XML syntax.
Body, table & paragraph elementshave styles from named classes inexternal style-sheet
Background colors are used for eachelt, with non-default font colors &non-zero table border.
Cols 1 & 3 are just Html labelsbut Cols 2 & 4 are retrieved fromXML file.
If data added/removed from XMLfile, the table html is automaticallyregenerated to adapt to the new data by the browser.
Empty field accepted becauseDTD allowed it. Test the differenteffects – they manifest DTD impact !
a.html
d.dtd
b.xml c.css
Body: <xml id="sList" src = "b.xml" />
Near top: <!DOCTYPE studentList SYSTEM
"d.dtd">
Top-level or root entity is: <!ELEMENT studentList (student+)>
Head: <link rel = stylesheet type = "text/css"href = "d.css" > </link>
syntax for file links Internal html id for data source: <table class="type1" datasrc
="#sList">
The following slides show examples of each typeof file and how they interoperate.
When you do this HW, be aware that the pieces canbe tested relatively independently – thus you can testthe xml [without the reference to the grammar file].and can test the html & css link before you have theHtml & xml comb working. Even if the entire packagedoes not work, you can surely submit working peices
<?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 >
Simple xml data file: name of root element
name of governing DTD file that defines warehouse syntax
<warehouse >
<part>
<nameOfPart> </costOfPart >
exactly one
many
lets say0 or 1 costs
Tree structure of XML data.
<manufacturer >
<nameOfManufacturer> </address > </phone > </email >
more complex hierarchy
<?xml version="1.0" ?>
<!ELEMENT warehouse (part+)>
<!ELEMENT part (nameOfPart, costOfPart?)>
<!ELEMENT nameOfPart (#PCDATA)>
<!ELEMENT costOfPart (#PCDATA)>
Simple dtd grammar file:
broadest or root category
Repeated instances
Subordinate fields
Terminal or bottom element fields
0 or 1 repetition of data only in xml file -else get DTD error
<?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…
More complex dtd grammar file:
deeper nesting
<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>
<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>
Simple html data capture file:Link to style class
Link to xml data
internal name for xmldata src: b.xml
Data retrieval of xml element value. The name is for an XML element.
<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>
<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>
Simple html data capture file:Link to style class
Style classes referenced
single row element – others generated automatically by browser
Note <tbody> tags
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 { ..... }
Simple CSS style classes file:
one choice of style for paragraph tag
another choice of style for paragraph tag
choice of style for table
Be sure to save as: "someName.css"
Semi-colons !
References & notes:
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.xmlXML data binding - partsList.xml, parts.htmlDTD - student5.xml, student5DTD.dtd
The examples are under: Html-examples directory on my web site & for the XML under: Html-examples >XMLexamples directory
Sebesta: XML pages: 291-306, 318-320, 328-329CSS pages: 90-100
Following site is useful for tutorials: www. w3schools.com/xml
firstName Harry lastName Jones GPA 2.5
firstName Bert lastName Smith GPA
firstName Bill lastName Gates GPA 1.2
firstName John lastName Newman GPA 4.0
HTML table below pulls data from XML file andShows Student Names & GPAs.
Cascading Style Sheet governs paragraph, body, and Table tags.
Document Type definition file defines XML syntax.
HTML table content will look like – with data from different levels in the tree
Challenge Variation
Replace leaf Name with:
<Name>
<firstName> </lastName >
You will have to independently find out how to do this in html
Notes on Challenge
<Name>
<firstName> <lastName >
<student>
<roster>
<GPA >
cell: dataFld=firstName
table datasrc=roster datasrc=name
cell: dataFld=lastName
cell: dataFld=GPA
table datasrc = roster
Outer table - with single row - has cell for theGPA - like in basic example.
Nested inner table is inside 2nd cell in the single row of the outer table.The innertable itself has same formatas the outer table…but with the extra datasrc attributes shown.
IOU:Adam Saponara