Web Technologies
Homework
End of chapter exercises due by Sunday following the class noted on the syllabus schedule for 651 and on the Sunday indicated for 668.
References
1. The W3C.
Additional Links
1. W3Schools - The following tutorials are referenced in chapter 3.
o Learn HTML
o Learn XHTML
o Learn CSS
o Learn Javascript
o Learn HTML DOM
o Learn AJAX
o Learn PHP
2. Object-Oriented PHP Tutorial and read only the following 3 sections:
o Understanding Object-Oriented Programming
o Defining Class Properties
o Defining Class Methods
o Comparing Object-Oriented and Procedural Code
Be sure and understand the 3 reasons why object-oriented php is a good choice.
3. Figure 3.6 Demo
4. Figure 3.9 Demo
5. Figure 3.10 Source
6. Figure 3.11 Source
7. Exercise 1 telnet example
Ch Homework
1. We want to see the http headers for a web page. You can do this in 2 ways. (1) Use telnet on your own client. If it is not installed, for example on windows, do a search for enabling telnet on windows and do that (see Exercise 1 telnet example above). (2) Use an online telnet client, for example, https://telnet.browseas.com/. You can just use the returned text for the complete response as your answer in a text file (this is the easy way). Note the URL to your text file on.
2. JQuery and XMLHTTPRequest exercise - Go to the w3schools.com site for Learn JQuery. Peruse the basic JQuery tutorial. Your goal is not to memorize, but to see how it works. Under the JQuery Get Started section, note that at the bottom of the page, it tells you how to include the JQuery library as a link from the cloud - use that method. Go to the JQuery Examples section and implement the first Ajax example for JQuery load(). Be sure to use a different .txt file contents that includes your name in youraccount. Note how easy this makes an Ajax call. Note the URL to your HTML file.
3. CGI exercise - We will just implement a simple CGI program using Perl. You will just copy my program and implement it in your account. CGI libraries offer sophisticated integration with a programming language. Go to https://swe.umbc.edu/~canfield/programs/colors4.html and choose a color and submit. See how the results work and view the returned HTML source. You can just replace the .cgi extension with .txt to see the commented source code. Replace 'Gold' with a different color and implement these 2 files in your account. You can see all color names and codes in the w3schools HTML tutorial. Note the URL to your HTML file.
4. PHP exercise 1 - Implement the procedural example from the object-oriented php tutorial above on . Then add a function with 2 parameters to add a lastname to a person as in this output. See also php associative arrays. Note the URLs to your php file and a text version so I can see the php code.
5. PHP exercise 2 - Implement the OO example from the object-oriented php tutorial above on with the added function. Note the URLs to your php file and a text version so I can see the php code.
6. Create an HTML Table of Contents (toc) on . A toc here is simply a list of 7 links in HTML. Submit the sine url to your toc on .
Chapter - SOAP
Homework
End of chapter exercises due by Sunday following the class noted on the syllabus schedule for 651 and on the Sunday indicated for 668.
References
1. SOAP at W3C.
2. XMLSchema at W3C.
Additional Links
1. W3Schools - The following tutorials are referenced in chapter 4.
o Learn SOAP
o Learn Schema
2. The shiporder.xml file with XMLSchema, but no namespace.
3. The shiporder2.xml file with XMLSchema and namespace.
4. XMLme Web Services. Choose 'Web Services' and then choose 'Shakespeare...More...'.
5. W3C XML Schema (XSD) Validation online or XML Validator - XSD (XML Schema) online or Free XML Validator online.
Homework
1. Recreate your resume XML document as valid using XMLSchema. This means that you will use the same resume, but swap out the DTD for a reference to the new external schema file. You need to use a namespace that you can create using your own account URL, just as I did in the chapter example. This will require 2 files - resume.xml and resume.xsd.
2. Validate your new resume using xmllint. Look at the man page to verify your syntax as having this form: xmllint --noout --schema note.xsd note.xml. Unlike xmllint output for DTDs, the output for schemas is: note.xml validates for the example above. Copy the xmllint command and output from the terminal screen and put it in a file called xmllint.txt.
3. Use the validator to validate your resume at both xmllint and an online validator. Be sure that the validation succeeds for your namespace. Put that complete output in a text file called xsv.txt.
4. Take a look at the XMLSchema for SOAP. Remember that for standard schemas, you can use the namespace URL. Also remember that since schemas consist of all tags, you will have to view the source to actually see it. Find the XML subtree that defines the Body tag and uses the ##any wildcard. Copy just that complex type to a text file called any.txt.
5. Here is an example of using a soap client from php5 to access a remote web service. you will see some PHP response detail and the actual request and response SOAP messages - examine them closely although you would never include that in real life. Create a soap client to a different web service than the examples. Note the link to your app.
o Some Web Services
o SOAP Unit Conversion Example
6. Create an HTML TOC on for these chapter 4 exercises. It should show an ordered list where links 1-5 go to the files created in exercises 1-5. Put the single url to this TOC in the assignment submission area.
Chapter - WSDL
Homework
End of chapter exercises due by Sunday following the class noted on the syllabus schedule for 651 and on the Sunday indicated for 668. Note that the hw for chapter 5 and 6 are due next week with nothing due this week.
References
1. WSDL at W3C.
2. XSLT at W3C.
Additional Links
1. W3Schools - The following tutorials are referenced in chapter 5.
o Learn WSDL
o Learn XSLT
o Learn XPath
2. WSDL for the Shakespeare web service.
3. SoapUI.
Homework
1. Create an XSLT stylesheet for your XML resume that uses a client-side transform to display your resume using an HTML table. You should use the resume validated by the XMLSchema for practice with namespaces.
2. Create an HTML TOC on for the hw from chapter 5 with the 1 link below (the toc will also include the links for chapter6 hw below).
a. XML resume file (that calls the XSLT)
Chapter - WS-*
Homework
End of chapter exercises due by Sunday following the class noted on the syllabus schedule for 651 and on the Sunday indicated for 668.
References
1. OASIS.
2. WS-Addressing at W3C.
3. RSS 2.0 Specification.
4. Atom Specification.
Additional Links
1. W3Schools - The following tutorials are referenced in chapter 6.
o Learn RSS
2. DocBook.
3. DocBook Book (see chapter 2).
4. XSL StyleSheets (current version: docbook-xsl-1.76.1.zip under docbook-xsl).
5. Saxon (download the Saxon 6.5.5 zip version) - this is the java-based processor (it is an older version but ok for us). You only need the saxon.jar file, so you can unzip it on your pc and then just upload that file to or unzip it on and delete the extra files.
Homework
1. Do this exercise with SAXON:
o Install the saxon.jar that is inside the saxon zip download. This basically just means to download the zip and put the saxon.jar up on . Then download the docbook stylesheet zip to your account. The wget command is the easiest way to do it, but you can do it anyway you wish. You will also probably want to create a directory on to put all this in first.
o Use saxon to transform the DocBook XSL release notes from xml to xhtml (just to test the install). Just put saxon.jar and the docbook-xsl folder in the same place and run it as:
tiny_mce_markergt;java -jar saxon.jar ./dbxsl/release-notes.xml ./dbxsl/xhtml/docbook.xsl>test.html
Where 'tiny_mce_markergt;' just represents whatever command prompt you have - yours will be different. The '>' in the command is an output redirect. Also, dbxsl is just whatever you renamed the docbook directory to. Your resulting test.html file should look like the release-notes.html in the docbook distribution. Note that your paths and filenames may be slightly different. Understand what that command above means rather than blindly pasting it - is just requires understanding where the files are.
- You can do it in your account as shown in this movie.
o Go to https://www.gutenberg.net/ and choose a book in text format.
o Markup the book with valid DocBook tags.
- Do a title page for the book.
- Do the first half page page of 2 different chapters for the book.
- So you will only have a small amount of text to mark-up for the book.
o Transform the book using saxon/docbook as you did with the release notes test. Here is an example of the HTML output.
o Create URLs for:
b. The URL to the book text on Gutenberg.
c. The original XML for the book that you created.
d. The resulting XHTML from the saxon transform for the book.
o Note these three URLs on .
2. Create an HTML TOC on with links for b-d above. Submit the single URL in the submission area on . Your final HTML TOC will have 4 links (a-d), including the first one from chapter 5 above.
________________________________________
Chapter - REST
Homework
End of chapter exercises due by Sunday following the class noted on the syllabus schedule for 651 and on the Sunday indicated for 668.
References
1. Fielding Dissertation (2000).
2. JSON.
3. CURL.
4. JQuery.
5. Building Web Services the REST Way
6. RESTful Web services: The basics
7. Jon Moore - Hypermedia APIs (cached video, cached slides)
o Is a versioned rest API like twitter (v1.1) also a hypermedia API? Why or why not?
o What is hateoas?
o Why are hypermedia APIs more loosely coupled?
Additional Links
1. W3Schools - The following tutorials are referenced in chapter 7.
o Learn JQuery
2. JSON demo.
3. Guardian/JQuery example. The referenced PHP file is also saved with .txt so you can see the code.
4. Example SVG image at Wikipedia (from here).
5. Flickr API.
6. We will use the Flickr REST API to build a url to their photo service. This will require that you register on Flickr and get an API key. This is free, quick, easy, and typical of the REST services out there. All the information of what to do is in the documentation on the Flickr site, but you may find this tutorial or this one useful also.
7. REST API Demo
Ch7 Homework
1. Implement the Guardian example from this chapter with a different query. You need to use 2 additional variables from the guardian JSON. You will end up with one url to submit, but you need to create the guardian.php for the application to call on using ajax. You now need an api-key for this as explained in the slides. Note that the jquery calls the php which uses curl to call the api to avoid cross-domain problems.
2. We will use the Flickr REST API to build a url to their photo service. Create the following URLs:
a. Create a REST query for getHotList from the Flickr API documentation. You can see the REST url work from my account:
b. =>curl -X GET 'https://api.flickr.com/services/rest/?method=flickr.tags.getHotList&format=rest&period=day&count=10&api_key=your_api_key'
c.
d.
e.
f.
g.
h. feb23
i. whitenight
j. whitenightmelbourne
k. farligt
l. avstand
m. facedowntuesday
n. encuentros
o. whenigrowup
p. dp3merrill
q. whitenightmelb
r.
s.
Or you could put the url directly in the browser address box. Note the the flickr api has been changed very recently to require https instead of regular http as here wrapped in php. You will use php to deploy all the urls for the hw as links. Be sure to save a duplicate .txt version so I can see the source.
t. Create a REST query to search for all photos with a certain tag. You can choose the tag. Limit the results to 10 photos.
u. Create a REST query to search for all public photos by a certain user reported in your last query.
v. Create a REST query to search for the geo-location of a photo by a user reported in your last query. You can do a query for a different user if your previous one had no geo-locations - just be sure to find one that does.
w. You will now have 4 urls wrapped in php.
3. Create an SVG file that contains a circle, a rectangle, and a line, each with a different color. Be sure to ditch the DTD and use the namespace. Save your SVG file on . Use your .svg file in an HTML file using the embed tag. Note the URL for your HTML file.
4. Watch the hypermedia API video and contemplate the questions. There is nothing to turn in, but it is testable.
5. Create an HTML TOC on . It should include 6 items from exercises 1-3 above. The first link is for the guardian app. The next 4 are for the 4 Flickr urls (inside php with duplicate .txt versions). The last url is for the SVG.Submit the single URL to your TOC in the submission area on .
Chapter - Distributed Systems Basics
Homework
End of chapter exercises due by Sunday following the class noted on the syllabus schedule for 651 and on the Sunday indicated for 668. Chapter 8 covers 2 weeks. Note that the hw for chapter 8 is due in the second week with nothing due in the first week. Note that chapters 8 and 9 are done in reverse order on the syllabus.
References
1. Caching Tutorial.
2. IETF (maintains the DNS specification).
3. OpenAFS.
4. W3Schools - XQuery Tutorial (Also review XPath there).
5. SAXON The XSLT and XQuery Processor - We will use the Saxon-HE.
Additional Links
1. Websocket.org.
2. Xen.org.
3. Vmware.com.
4. xQuery tester.
Notes
• XSLT implementations are generally optimized for transforming entire documents; they load the entire input document into memory. XQuery is optimized for selecting fragments of data, for example, from a database like eXist. That database uses the same library we will use from the command-line for the hw. It is designed to be scalable and to take advantage of database features such as indexes for optimization.
• XQuery has a more compact, non-XMLsyntax, which is sometimes easier to read and write (and embed in program code) than the XML syntax of XSLT.
• XQuery is designed to select from a collection of documents as opposed to a single document. FLWORs make it easy to join information across (and within) documents. Also, XSLT 2.0 stylesheets can operate on multiple documents, but XSLT processors are not particularly optimized for this less common use case.
Ch8 Homework (hw7)
1. Do the AFS exercise given here. This will give you an example of administration of a distributed file system that we studied in chapter 8. There is nothing to turn in.
2. Read and study the XQuery Tutorial section.
3. Download and install the Saxon processor. You can delete your old saxon.jar file from your account to save space. You need to download the zip file for Java for Saxon-HE 9.7 from SourceForge (e.g. SaxonHE9-7-0-8J.zip). You will unzip it and you only need the saxon9he.jar file on . Also read the documentation under Using XQuery - Running XQuery from the Command Line.
4. Implement all the XQuery examples for the W3Schools bookstore example in your account. First modify the given books.xml file to have 5 addtional books for a total of 9 books. Create a transcript of all these examples working and put them in a text file. This is how your transcript should look. See this note on the data function. Here are the 8 examples repeated from the W3Schools reading:
a. doc("books.xml")/bookstore/book/title
b. doc("books.xml")/bookstore/book[price<30]
c. doc("books.xml")/bookstore/book[price>30]/title
d. for $x in doc("books.xml")/bookstore/book where $x/price>30 return $x/title
e. for $x in doc("books.xml")/bookstore/book where $x/price>30 order by $x/title return $x/title
f.
{ for $x in doc("books.xml")/bookstore/book/title order by $x return - {$x}
}
g.
{ for $x in doc("books.xml")/bookstore/book/title order by $x return - {data($x)}
}
h. for $x in doc("books.xml")/bookstore/book return if ($x/@category="CHILDREN")
then
{data($x/title)} else
{data($x/title)}5. Use the following xquery that transforms the cdcatalog.xml from W3Schools to:
o change the 'country' element to be an attribute on the 'cd' element
o add an 'id' attribute to the 'cd' element that is an incremented integer (1,2,3...)
o The xquery: catalog.xq
Then redo examples e-h above using the new cdcatalog.xml file with appropriate changes to the XQuery to match the new cdcatalog so that it makes sense. Save a transcript of the transform and the 4 examples working on the command-line. Be sure and cat each file you are calling before you call it so I can see the source code - there is an example in the above sample transcript. The new xml should look like this.
Submit the toc with 2 links (#4,5) on .
Chapter - Microservices
Homework
End of chapter exercises due by Sunday following the class noted on the syllabus schedule for 651 and on the Sunday indicated for 668. Note that chapters 8 and 9 are done in reverse order on the syllabus.
References
1. Design Patterns book by Gamma et al.
2. SVG at W3C.
Additional Links
1. TinyMVC.
2. Silex.
3. Download Silex from here because I have modified it for you to add some libraries.
4. unzip command.
5. Webadmin for MySQL - web-based GUI.
Ch Homework (hw6)
1. Implement the 'grades roster' TinyMVC application from the book on . Be sure you understand the code. Note the URL for your app.
2. Create a new application using TinyMVC for a blog. You can design it to look however you wish, but is should not look like the grade roster since that would be inappropriate for a blog. You only need to implement the 'CR' from CRUD since this is a user facing application and users would not be able to 'UD' (an admin would be able but we will not implement that now). It should have fields for: author, date, subject, and the text of the post. It should also have user controls in the app (the user should not have to know any urls except for the home page entry). Note the URL for your app.
3. Implement the 'hello' starting app for the silex framework on - be sure to include the parameratized url route from the silex home page. Understand how it works. We will be using this framework in a later chapter. Note the URL for your app using a 'pretty' url.
4. Create an HTML TOC with links to the 3 URLs. Include redundant .txt files for #2. Submit the single URL for the TOC in the submission area on .
Chapter - SOAP Revisited
Homework
End of chapter exercises due by Sunday following the class noted on the syllabus schedule for 651 and on the Sunday indicated for 668.
References
1. C14n at W3C (Canonicalization.)
Additional Links
1. Shakespeare Hard-coded Example from the text.
2. Shakespeare Form Example from the text.
3. cdStore simple example from the text.
o You can see the code for both files by using a .txt extension. For example, to see the URL above, use cdsoapclient.txt.
Ch10 Homework (hw8)
1. Implement the Shakespeare web service client on using an html form. Note the URL to the client.
2. Create a SOAP catalog server similar to the one in this chapter but using different products. Test it with a similar hard-coded PHP client that includes display of the the request and response SOAP. Hard-coded means that the client passes a static request. Note the URL to this client.
3. Refactor this simple SOAP web service from the chapter for your product catalog to solve 4 problems:
1. The client should not be hardcoded.
2. Modularity - The server function should be moved to a separate file and the 3 arrays should be consolidated into 1 array and moved to a separate file.
3. The web service should return an invoice in either html or json.
4. A new and separate web service function should return the catalog as an html table.
The complete instructions on this refactoring reference the given sample files. Note the url to your working v2 application on gl. Be sure to redundantly save each .php file as .txt so I can see the source code.
4. Create an HTML TOC with links to the 3 URLs from exercises 1-3. All php files should be redundantly named with .txt so I can see the source code.Submit the single URL to this TOC into the submission area on .
Chapter - REST Revisited
Homework
End of chapter exercises due by Sunday following the class noted on the syllabus schedule for 651 and on the Sunday indicated for 668.
References
1. Magpie.
2. PATCH.
3. OmDb.
4. Rolling Stone RSS.
Additional Links
• source code for mashup 'starter' for hw (use .php for live working example).
• W3schools url encoding.
• PHP urlencode function.
• Final mashup demo with 5 titles and urlencode.
Notes
1. If you ever have trouble with curl on the command line, place your url inside single quotes and try it again.
2. Remember that the REST application is a live application. Do not go drunk and crazy and mess up my application database. If you want to play with mine, then create a new record, edit that record, and finally delete it.
Ch11 Homework
1. Do the final movie mashup from the book. Limit the output to 10 entries. Note the URL to your working mashup.
2. Implement a REST API for a your product catalog database using silex. Note the URL.
3. Create a HTML TOC with 4 links (2 URLs for each where one is a .txt version of the php code). Submit the single URL to your TOC in the submission area on .
________________________________________
Chapter - Microservices Revisited
Homework
End of chapter exercises due by Sunday following the class noted on the syllabus schedule for 651 and on the Sunday indicated for 668.
References
1. MongoDB Replication Introduction
2. MongoDB Sharding Introduction
3. mongo Shell Quick Reference
Additional Links
1. MongoDB
2. Cloud9
3. Setting Up MongoDB on Cloud9
4. From JSON to BSON & Back
Ch Homework
1. Do the introductory tutorial: Getting Started with MongoDB - Part 1 on c9. Save a command-line transcript as text. Be sure you have shared your workspace with me.
2. Create a php file on c9 using PHP and HTML based on the MongoDB and PHP Tutorial. The php file should give this output on c9. Submit the screenshot with different values and the source code as text. One will output html rather than use print_r. For example: echo "
" . $document["title"] . "
";
3. Start your mongod and use the mongodump command from a new terminal. This will create a *dump* directory with the bson files from your mongodb database. Choose a .bson file in there for a database you made and translate it using the online service: JSON BSON Converter. Put the translated json into a text file and note the url.
4. Create an HTML TOC for chapter 12 with 5 links. The final link is to your c9 workspace. Submit the single URL to your TOC in the submission area on.
Attachment:- Resume.rar