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

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 …

Assignment #1 – Learning some HTML on your own

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.

Assignment #2

HTML Forms & simple Java scriptlets to validate data.

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


submit clear


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


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.

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




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




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" ?>

<!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 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

References & notes:

ConverterMulti-verterGuided form

Sebesta:

Following site is useful for tutorials: www. w3schools.com/xml

Date post:	19-Dec-2015
Category:	Documents
View:	217 times
Download:	0 times

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

Documents