geo1007-labinstructions

GEO1007 Lab 1 - Web app basics: structure and communication

Introduction

The goal of this first lab assignment is to get a view ‘behind the scenes’ of web sites. The assignment starts with installation of a web server, and a small example web site.

This is used as starting point to:

Examine the basic structure of a web page (= HTML document), also known as: the HTML DOM (= Document Object Model)
Analyze the communication between web browser and web server(s)

The material needed for this lab is:

This guide
The installation guide for installing Apache Tomcat (web server software) on your laptop
The contents of the github(https://github.com/bmmeijers/geo1007-2025) repository for this course

The software needed for this assignment is:

A web browser: Firefox, Chrome or another browser (but it should have Web Developer tools in its menu, for examining the web pages and the communication between browser and web servers)
The Apache Tomcat version 9 webserver
A text editor, like: Sublime Text or Notepad++ (or another of your liking)
Git (version control) installed on your machine (sometimes preinstalled)
Your own github account

Part A describes the installation and setting-up phase, Part B is the assignment (with questions) itself.

Part A: Setting Up

Follow the separate steps in the Apache Tomcat installation guideline to install Apache Tomcat (web server) on your laptop.

Perform this individually, also if you work in a group of two persons. So, everyone should do this installation step on their laptop.
Check if you have git installed on your machine. Open up your Command Prompt (Windows) or Terminal (MacOS) and type the command git --version. If you get a response, it is installed. If the command is not known, you can install git via this guide. If you are unsure what git is, there will be more information later on.
If you don’t have a github account, go ahead and create one.
Navigate to the GEO1007 github page, and log in if necessary. You should see a simple page with directories and files.

💡 Optional Background

If you are unfamiliar with github, read on. github is essentially a service for storing, sharing and collaborating on the development of code. git is the actual version control system used to track and manage changes in code (analogous to track changes on a word processor). github on the other hand is a service with git as a central part of its technology. It provides hosting code tracked by git and much much more!
From the main github page, fork the repository to your account as follows:
- Click the fork dropdown menu, and then click + Create a new fork
- In the page that follows, don’t change anything and click Create Fork
💡 Optional Details

Forking the repository means that you have ‘your own’ copy of the source code now associated with your account. The fork, however, does retain memory of its origin, and you can continue to synchronize changes made to the origin and even contribute your changes to the origin source.
Now it is time to copy the source code to your local machine. Right now it only exists remotely on the Github’s server. The last step should have redirected you to your copy of the repository we’ll be using. If for some reason it didn’t, navigate to your Github main page, find the newly created Geo1007-2025 repository from the ‘Top Repositories’ list on the left hand side and click on it.
Click the green ‘Code’ dropdown, select HTTPS option and copy the link to the remote repository. The link should look something like this: https://github.com/<yourUsername>/geo1007-2025.git

⚠️ Warning

Make double sure you are cloning your forked repository! The link copied in this step contains your username.
The code we’re about to clone is going to be used with the Apache Tomcat server you installed earlier. More specifically, we want it in the webapps directory within the Tomcat directory. Lets make sure to copy this into the right location.

Open up your Command Prompt (Windows) or Terminal (MacOS) and navigate to the folder where you installed Tomcat using the command: cd <path/to/tomcat/webapps>.

⚠️ Warning

Make sure the path used in the command above is to the /webapps directory. For example, on my (Mac) machine, my path looks like this: /Users/jschembri/geo1007/apache-tomcat-<version>/webapps. On Windows this could look like: D:\geo1007\apache-tomcat-<version>\webapps.
Finally, clone the repository from the URL you got at Step 7 earlier, which should look something like this:

git clone https://github.com/<yourUsername>/geo1007-2025.git geoweb

Some text should appear as your machine downloads and places the source code. The source code should be placed in the local folder geoweb (under the webapps folder, which is the webroot of your webserver, i.e. the place where it serves files from).

You should now have something like this in your .../geo1007/apache-tomcat-<version>/webapps directory:

geo1007/apache-tomcat-<version>/webapps/geoweb/lab1/photoSearch/
geo1007/apache-tomcat-<version>/webapps/geoweb/lab1/_95746143_sciencelondon.jpg
geo1007/apache-tomcat-<version>/webapps/geoweb/lab1/index.html

Now, we start the Apache Tomcat server. From your Command Prompt or Terminal, navigate to the bin directory in the Tomcat installation and run startup.bat (Windows) or startup.sh (Linux/Mac).
In your web browser enter the web address: http://localhost:8080/geoweb/lab1/, a page should come up:

💡 Optional Background

The file name of this web page is ‘index.html’. Because index.html is the default name for a web site’s start page you can omit it from the web address. (Just try it: http://localhost:8080/geoweb/lab1/index.html has the same effect as typing the shorter web address without index.html).
Debug tools: Web Developer tools of your browser

Open the Web Developer tools menu, either via the top menu, or via the menu icon in the toolbar. See figure above, this is how it will look in Firefox.

If you use another web browser, the menu can look slightly different, with different names, for example ‘more tools’ ⇒ ‘developer tools’ in Chrome).

For the assignments the following tools from the Developer menu are important:
- Inspector: to analyze the structure of a web page
- Network (monitor): to analyze the network requests that originate from the web site and the responses it receives from (other) web servers
- Web console: this gives also information about the HTTP requests made, and more importantly: about errors encountered in the HTML or JavaScript code

B. Lab Assignments

Assignment 1: The structure of a (simple) HTML page

Analyze the structure of the start page (index.html) of http://localhost:8080/geoweb/lab1/

You can do this in two ways:

‘Offline’ / via the file system: open index.html in your text editor (e.g. using Notepad++ or Sublime Text) to look at the HTML code itself
‘Online’ / via the web browser: open in your browser, and use ‘Inspector’ to see both the page as it appears, and the code that creates it

❓ Question #1

a. Which HTML DOM elements (‘HTML tags’) do you see? (make a list)

b. Describe, in your own words, for each of these elements what its function is (what does the element ‘do’).

A good source of information is the Mozilla Developer Network site, but also W3 schools has good information.

Note: do not copy and paste, but describe in your own words. However if you want to ‘cite’ then put quotation marks around the text you copied, and the source where you copied it from.

c. With your text editor of choice make some changes in index.html, for example change the picture for another one of your liking, or type some more meaningful text in the paragraph with Latin ‘filler’ text … Refresh the browser to see the results. Make a screenshot of your new page and save it for your report to hand in.

Assignment 2: Network traffic (communication between web browser and web server(s))

Go again with your browser to http://localhost:8080/geoweb/lab1/

There are a number of links on that page:

List A. has links to some example web pages and small apps on your own web server (localhost). There are two examples of JSP pages (server-side scripting, part of the Tomcat examples) and an example that is JavaScript-based (uses client-side scripting, based on example from the book by Purewal ‘Learning Web App Development’).
List B. has links to web sites that are not on your localhost server, and are obviously much more complex.

❓ Question #2

Choose two links from List A. and two links from List B (so four in total) and use the Web developer tools especially the Network monitor) of your browser to analyze what happens when you open that link.

Answer for each of the chosen links separately (so four times in total) the following questions:

a. What web requests (HTTP or HTTPS requests) do you see in the Network monitor? Remark: there can be only a few requests (the JSP examples in list A), but for the other examples a lot more, so in that last case: Limit yourself to 5 different requests per link. (Write down the ‘url’ of the request.)
Note, for the Firefox browser you can find information about what is in the columns: **status, method, file, domain, cause, (content) type, etc. here: https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor For other browsers the terminology is most of the time the same.

b. What ‘(content) types’ do these requests have (these indicate what kind of response is received by the browser as result of a request)? And what do they mean?

c. Which ‘status codes’ do you see for these requests, and what do they mean?

d. Make a screenshot (for the report) of (part of) the requests as displayed in the Network monitor that you described in questions a-c.

e. Comparing the four links you analyzed: What are the main similarities and what are the main differences?

Assignment 3: Analyze a web site that has a map on it as part of the content

Find on the internet a web site that has a map as part of it. The choice is up to you, except: do not choose Google Maps, Bing Maps or another specialized map application (and also not a page that ‘embeds’ such an advanced application to show a map).

For example: https://www.anwb.nl/verkeer/nederland/verkeersverwachting, https://www.knmi.nl/home, https://www.buienradar.nl/nederland/wind/actuele-wind are good examples (or a travel site with hiking or bicycling routes, or the site of an organization with contact information containing a map, or ...).

❓ Question #3

Analyze the chosen web site (by using the Web developer tools of Firefox / Chrome / other browser) and find out:

How is this map requested from the web server? (what is the url of the request for the map)?

What is the content type of the map as sent back by the web server (the response)?

Give not only the answers, but also a short description (max. 100 words) of how and where you found the answers about the map request and response.

Include some screenshots to clarify.

What to submit

Submit the work for this lab1 together with the work for lab2.

Submission date and time is on Brightspace.

What to include in this lab1 part of your report:

The answers to the questions, including the requested screenshots (for 1.c, 2.d and 3).
Additional screenshots to support your findings, if needed for clarification.

The complete report for Assignment 1 (lab1 and lab2 together) should not be longer than 6 pages of text, but not counting screenshots or other figures.

Also, do not forget to put your name(s) and student number(s) on the first page of the report.