Goal of this second lab assignment is to get familiar with some important aspects of web app development:
The material to use is:
lab2 folder in the git repository (https://github.com/bmmeijers/geo1007-2025) of the courseThe software needed for this assignment is:
The assignment has two parts:
CSS stands for Cascading Style Sheets, and is used to add style to HTML pages.
To look up information you can use these sources:
Start Apache Tomcat (your web server) if it does not run, with start.bat (see Apache Tomcat instructions).
Go to http://localhost:8080/geoweb/lab2/styling/amaze3 to see how that web page looks.
In order to see how this is achieved: Open in your text editor the file
style.css in the folder: geo1007/apache-tomcat-<version>/webapps/geoweb/lab2/styling/amaze3
Examine the content and especially look at the type of ‘selector’ or
combination of selectors that are used in style.css.
❓ Question / Result #A.1
Which kind of selectors (or combination of selectors) are used in
style.css? Give the name and an example of each kind.
Go to the start page of lab2, that is: http://localhost:8080/geoweb/lab2/index.html
Your task is to change the style (layout, colors) of the start page, by applying the changes listed under question A.2 (see below).
There is a choice where to add your CSS rules (it is up to you):
<style> element in the <head> of the index.html file,<head> element of index.html.❓ Question / Result #A.2
Make the following changes in the styling of
geoweb/lab2/index.html, and test for each change if the effect is as you expected (if not: you might have to refresh the web page in your browser):a. define a background color for the whole page
b. make borders around the two lists
c. give list A another text font than list B
d. make a ‘fat’ border around the
<p>paragraph text (thicker than the other borders)e. ... any other effects, but the previous four changes are a must.
After these changes and a final test: Make a screenshot of how the web page finally looks in the browser.
Include in the assignment submission:
The index.html changed by you and, if you have the CSS rules in a separate file, also include that
.cssfileIn your report: the screenshot of how the web page finally looks in your browser.
This part of the assignment focuses on JavaScript as language for client-side processing in web pages.
Purpose is to get some idea about how user input can be handled, and how requests are made to other web services.
To look up information you can use these sources (and others if needed):
So far, you have been exploring HTML elements (via the Document Object Model) and CSS (Cascading Style Sheets). Now, it is time to delve into how Javascript interacts with HTML and CSS.
Go to: http://localhost:8080/geoweb/lab2/interaction/add2dom/index.html
Your task is to understand and articulate the interplay between Javascript, HTML, and CSS on this webpage.
❓ Question / Result #B.1
Describe in your own words the distinct roles of HTML, CSS, and Javascript in two scenarios: a. when the webpage is initially loaded, and b. when a user adds a new Todo item? Please specify concisely which technology (Javascript, HTML, or CSS) is accountable for what and how, relate in your answer to the source code of the webpage.
The following web app is a more advanced example of how data from other web servers can be requested and presented in your own web page. It sends a request to one of the web services maintained by the GeoNames project:
Go to http://localhost:8080/geoweb/lab2/interaction/placenames
Try out some inputs of postal code to see if the postal code is found. If possible test a non-Dutch postal code as well (e.g. search for the Postal code of down town London)!
Note: You will see also the ‘raw’ JSON data that comes as response from the web service of GeoNames.
From that JSON data then the table row with the place name and the latitude and longitude of the center of that postal code area is created.
(The other possibility to see the JSON data is through the Firefox or Chrome Developer tools, as you used them in lab1.)
Open the file lab2/interaction/placenames/app.js in your text editor and examine the JavaScript code.
❓ Question / Result #B.2
Answer the following questions:
a. In the JavaScript code there are some ‘events’ defined, that will be ‘fired’ when there is an action by the user (a click or some other input). Which events do you see in the code? Copy the statement or statements to your report.
b. Explain how in these statements, that handle events, ‘selectors’ are used (comparable to what you saw in CSS for styling).
c. Which function in app.js will then be carried out, as reaction to the events?
d. In which function in app.js is the web request constructed and sent to the GeoNames server to get the place name for a postal code?
e. Describe (based on the JavaScript code) what happens when the JSON response is received from the GeoNames service (postal code -> place name)
As an example of how the output of one web service can be used as the input for a request to another web service we made a small extension to the placenames app:
Go to http://localhost:8080/geoweb/lab2/interaction/placenamesAndMore
Two buttons have been added to the row(s) in the result table (try a postal code search to see the buttons). A click on the first button requests a map fragment from OpenStreetMap, a click on the second button sends a request to another GeoNames service, one that finds the nearest road intersection to a (lat/long) point. The output of this GeoNames service is XML.
❓ Question / Result #B.3
Examine the way the XML output of this second GeoNames web service is handled. Compare with the postal code → place name web service (see question B.2.e). What are the differences? And what are the similarities?
As you have seen probably when using the buttons to get a map or to request the nearest intersection, the results of previous button clicks stay on the screen.
This is rather confusing (leads to inconsistent information, which is not good ..).
❓ Question / Result #B.4
What you have to do is: Change the code in
placeNamesAndMore/app.jsto fix this ‘bug’. In other words: Adapt the Javascript code so that a map is removed before a new map is displayed. And the same for the (raw) XML output and table of the nearest road intersection. Also these should be removed before new intersection information is displayed.Include in the assignment submission:
In your report: the code fragment(s) that you changed to accomplish this. Also motivate why you chose that solution.
The changed file or files of ‘placenamesAndMore’. Or, if it is easier, you can instead include the complete ‘placenamesAndMore’ folder (with changed and not changed files).
Submit the work for this lab2 together with the work for lab1.
Submission date and time is on Brightspace.
What to include for lab2:
In the combined report: the answers to the lab2 questions, including screenshots
For question A.2: the index.html changed by you and if applicable
the .css file added by you
For question B.4: the changed file or files of ‘placenamesAndMore’
Because you have to submit several items (report and files or folders) it is advised to zip everything into one zipfile and submit that.