Web Engineering :: Course Log

Lectures Log - A.Y. 2024/2025

Total lectures: 12, total lecture hours: 24 (50%) - First lecture: 2025-02-25, Last lecture: 2025-04-03

Lecture 1: Modern web: technologies, challenges and problems

2025-02-25, 16:30 (2 hours)

(1-1)

Course presentation
(1-2)

The origins of WWW
(1-3)

The client-server architecture
(1-4)

Web 2.0: Rich Internet Applications, Social Web
(1-5)

Today's web problems: accessibility, usability, cross-browser programming, security, mobile first,...
(1-6)

Web technologies: client side (HTML5, CSS3 e responsive design, Javascript, AJAX)
(1-7)

Web technologies: server side (Java servlets, JDBC, Freemarker templates)
(1-8)

Creating a website with the MVC pattern: separation between data, business logic and presentation

Lecture 2: XML

2025-02-27, 14:30 (2 hours)
Slides XML

(2-1)

The HTTP protocol
(2-2)

Base concepts: URIs, URLs, media types...
(2-3)

What is and what is not XML
(2-4)

XML base syntax: the XML declaration
(2-5)

Example Character encoding problems
(2-6)

Character encoding: what is really UTF-8? (and UTF-16? and ISO-8859-1??)
(2-7)

Example Character encoding: can also be a security problem: the UTF-7 attack
(2-8)

XML base syntax: the DOCTYPE declaration
(2-9)

Example Correct declaration of the HTML version in use
(2-10)

Standards and Quirks modes
(2-11)

XML base syntax: elements and their syntactic rules
(2-12)

Example Common problems related to element syntax
(2-13)

XML base syntax: attributes and their syntcatic rules
(2-14)

Example Common problems related to attribute syntax
(2-15)

XML base syntax: namespaces
(2-16)

XML base syntax: text and character entities
(2-17)

Example XSS attacks and the correct use of entities for reserved characters

Lecture 3: HTML /1

2025-03-04, 16:30 (2 hours)
Slides HTML

(3-1)

XML base syntax: CDATA sections
(3-2)

Example The problem with embedded scripts in HTML pages
(3-3)

The HTML evolution
(3-4)

Keeping up to date with the living standard: reference sites
link https://developer.mozilla.org/en-US/docs/Web/HTML
link https://html.spec.whatwg.org
(3-5)

Check and fix your HTML: validators
link https://validator.w3.org
(3-6)

Base concepts: URIs, URLs, media types...
(3-7)

Standards and Quirks modes
(3-8)

Basic document structure for HTML4 and HTML5 documents
(3-9)

HTML: inline and block elements
(3-10)

The new element classification in HTML5
(3-11)

HTML: common attributes
(3-12)

New HTML5 common attributes: data, aria,...
material HTML_Examples - HTML5
(3-13)

Example Use of the ARIA attributes in complex, customized layouts
link https://www.w3.org/WAI/standards-guidelines/aria
(3-14)

HTML: paragraphs and breaks (p, br)
(3-15)

Example Empty paragraphs, line breaks, etc.: the wrong ways to add vertical space
(3-16)

Marking the document base structure: the h elements
(3-17)

The semantic value of a correct markup
(3-18)

The new HTML5 sectioning elements
material HTML_Examples - HTML5
(3-19)

Example Actual rendering of the HTML elements
material HTML_Examples
(3-20)

HTML: the div and span containers (div, span)
(3-21)

HTML: semantic formatting (em, code, pre, ins, q,...)
(3-22)

HTML: base formatting (i, b, tt,...)
(3-23)

Example New behaviour of some formatting elements in HTML5
link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

Lecture 4: HTML /2

2025-03-06, 14:30 (2 hours)
Slides HTML

(4-1)

Lists as semantic element in complex layouts
(4-2)

Example Creating a menu with graceful degradation using lists
material css_menu_multilev_static
(4-3)

HTML: lists (ol, ul, dl)
(4-4)

HTML: tables
material HTML_Examples - Tables
(4-5)

The table element attributes in HTML5
(4-6)

Base table structure: rows (tr), cells (td) and header cells (th)
(4-7)

The complete table structure: header (thead), body (tbody), footer (tfoot)
(4-8)

Example Watch out for the implicit tbody element...
(4-9)

Creating complex tables with colspan and rowspan
(4-10)

Images in web pages
material HTML_Examples - Images
(4-11)

Accessible images: the alt attribute
(4-12)

Client size image resizing
(4-13)

Server and client side image maps
(4-14)

Logical links between resources (link)
(4-15)

The rel(ation) attribute in links
link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
(4-16)

Example Alternate documents
(4-17)

Example External stylesheets
(4-18)

Example Adding a RSS feed to a web page
(4-19)

Example Adding a shortcut icon to a web page
(4-20)

Example Page loading optimization: preload and prefetch links
link https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading
link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload

Lecture 5: HTML /3

2025-03-11, 16:30 (2 hours)
Slides HTML

(5-1)

Hyperlinks (a)
(5-2)

Anchors and fragment identifiers
(5-3)

Example Jump directly to the page content
(5-4)

The GET and POST methods
(5-5)

Forms in HTML (form)
(5-6)

Important form attributes: action, method, enctype e accept-charset
link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
(5-7)

Form data encoding
(5-8)

Example Choosing the right method/encoding combination for a form
(5-9)

Example The POST-Redirect-GET pattern for form submission
link https://en.wikipedia.org/wiki/Post/Redirect/Get
material Java_Example_Post_Redirect_Get
(5-10)

Example Using accept-charset to solve further encoding issues (this time between client and server)
(5-11)

The input control element (input)
(5-12)

Example Rendering comparison for input controls on different browsers
material HTML_Examples - Forms
(5-13)

Example Values submitted by non-textual inputs: file, checkbox, radio,...
(5-14)

Example Avoiding trasmission of a form field value using the disabled attribite

Lecture 6: Java Web Applications

2025-03-13, 14:30 (2 hours)
Slides HTML, Servlets

(6-1)

Value validation attributes in HTML4 and HTML5 (maxlength, min, max, pattern,...)
(6-2)

Example How (and where) form data should be validated
(6-3)

Example Different use cases for hidden inputs
(6-4)

Example Hidden inputs and CSRF tokens
link https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html
(6-5)

Text editors (textarea)
(6-6)

Multiple choice selectors (select)
(6-7)

Example Option labels and values: which data should I send to the server?
(6-8)

Options and option groups
(6-9)

Different renderings of select controls
material HTML_Examples - Forms
(6-10)

Example Select controls used as menus on mobile devices
(6-11)

Accessible control labels (label)
(6-12)

Example How to check (and integrate) your Java development platform
(6-13)

Java/Jakarta Enterprise Edition (JEE/JakartaEE): versions and profiles
link https://www.oracle.com/java/technologies/java-ee-glance.html
link https://jakarta.ee/about/jakarta-ee/
(6-14)

Migration from JEE to JakartaEE: issues and solutions
link https://blogs.oracle.com/javamagazine/post/transition-from-java-ee-to-jakarta-ee
(6-15)

(Private) Installation of an updated JDK

Lecture 7: Java Servlets /1

2025-03-18, 16:30 (2 hours)
Slides Servlets
Material JakartaEE Web Application tutorial, JavaEE (legacy) specification

(7-1)

Netbeans IDE introduction
(7-2)

Apache Tomcat server installation and introduction
(7-3)

Example Some useful tips to link Netbeans and Tomcat
(7-4)

Servlets and containers
(7-5)

Introduction to servlet programming
(7-6)

The web application context and the url mapping
(7-7)

The web application base structure
(7-8)

The web application folder structure
(7-9)

Example How to create a new web application
material Java_WebApp_Base_T10
(7-10)

Example Compiling, deploying and executing a web application
(7-11)

Example How to add static resources (html, css, etc.) to a web application
(7-12)

Example The project object model (POM) of a simple web application
(7-13)

The context configuration file (context.xml)
link https://tomcat.apache.org/tomcat-10.0-doc/appdev/deployment.html

Lecture 8: Java Servlets /2

2025-03-20, 14:30 (2 hours)
Slides Servlets
Material JakartaEE Servlet tutorial

(8-1)

Example How to add a new servlet in a web application
(8-2)

The deployment descriptor (web.xml)
material Java Servlet Specification, version 2.3, Chapter 13 - Deployment Descriptor
(8-3)

The servlet base interfaces: Servlet, ServletRequest, ServletResponse
(8-4)

The servlet lifecycle: initialization, service and finalization
(8-5)

Servlet initialization and finalization: init and destroy methods
(8-6)

The HttpServlet class and its doGet and doPost methods
(8-7)

Multithreading in the HttpServlet class: per-thread and shared variables
(8-8)

Writing data to the client: the HttpServletResponse class
(8-9)

Textual and binary output from a servlet
(8-10)

Example The "Hello World" servlet
(8-11)

Writing headers and payload of an HTTP response
(8-12)

Communication among application layers through request attributes
(8-13)

Effective error and exception handling in servlets
(8-14)

Returning HTTP error codes from a servlet

Lecture 9: Java Servlets /3

2025-03-25, 16:30 (2 hours)
Slides Servlets

(9-1)

Getting user input through HttpServletRequest
(9-2)

Reading form GET parameters: getParameter and getParameterValues
(9-3)

Input validation to prevent attacks (like SQL Injection)
(9-4)

Output sanification to prevent XSS attacks
(9-5)

Example The "Hello World" servlet with a name parameter
material Java_Example_Servlet
(9-6)

Output logic (view) encapsulation and application layers
(9-7)

Example The restructured "Hello World" servlet
material Java_Example_Servlet_Fwk
(9-8)

Binary data download through servlets
(9-9)

Security issues: why we should use a download servlet and how we should write it
(9-10)

Some interesting HTTP headers: Content-Type, Content-Disposition and Content-Length
(9-11)

Example An example of download servlet
material Java_Example_Downloader
(9-12)

Server-side generated images with Java
(9-13)

Example An image generation servlet
material Java_Example_Imager

Lecture 10: Java Servlets /4

2025-03-27, 14:30 (2 hours)
Slides Servlets

(10-1)

Reading form POST parameters with url encoding
(10-2)

Handling multipart encoded forms with JEE version 6+
(10-3)

The multipart-config element
(10-4)

Handling uploaded files with getPart()
(10-5)

Example The 'Hello world' servlet with file upload
material Java_Example_Servlet_Multipart_7
(10-6)

Filenames sanitization
link https://cheatsheetseries.owasp.org/cheatsheets/File_Upload_Cheat_Sheet.html#filename-sanitization
(10-7)

Example Secure web applications accepting uploads
link https://cheatsheetseries.owasp.org/cheatsheets/File_Upload_Cheat_Sheet.html
(10-8)

Application configuration through ServletContext parameters
(10-9)

The web application status: sessions
link https://cheatsheetseries.owasp.org/cheatsheets/Session_Management_Cheat_Sheet.html
(10-10)

Example Sessions for user profiling
(10-11)

Session identifier exchange: cookie and URL rewriting
(10-12)

Generate and handle session information: the HttpSession class
(10-13)

Read and write session variables: getAttribute, setAttribute
(10-14)

Close a session: invalidate
(10-15)

Example The 'Hello world' servlet with sessions
material Java_Example_Servlet_Sessions

Lecture 11: Sessions and Security

2025-04-01, 16:30 (2 hours)
Slides Servlets

(11-1)

Sessions for user authentication
(11-2)

Example Login, logout and authenticated sessions
material Java_Example_Login
(11-3)

User authentication and secure password storage
(11-4)

Example Password hashing with PBKDF2 in Java
link https://en.wikipedia.org/wiki/PBKDF2
link https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html
(11-5)

The login-with-redirection technique
(11-6)

Session protection techniques
(11-7)

Session refreshing
(11-8)

Session timeout(s)
(11-9)

Example The SecurityHelpers class
(11-10)

Filters in java web applications and how to use them to ease session management
material Java_Example_Login_Middleware

Lecture 12: Web Applications and Databases

2025-04-03, 14:30 (2 hours)
Slides Servlets

(12-1)

Java and DBMS: references to JDBC basics
(12-2)

Example JDBC: adding the driver dependency to the project POM
(12-3)

Example JDBC: the main classes (Connection, (Prepared)Statement, ResultSet)
(12-4)

Example JDBC: opening a connection through the DriverManager (not recommended in web applications!)
(12-5)

Example JDBC: execution of insert, update, delete queries
(12-6)

Example JDBC: execution of select queries
(12-7)

JDBC: closing resources (resultsets, statements and connections)
(12-8)

JDBC: precompilation of (parametric) queries
(12-9)

Example Reasons to use PreparedStatement in a web application: safety (against SQL injection)
(12-10)

Example When to open a connection in a web application/servlet and when to close it
(12-11)

Data access performances in web applications: the connection problem
(12-12)

Reusing JDBC connections: connection pooling
(12-13)

Configuration of a JDBC data source in Tomcat (context.xml)
link https://tomcat.apache.org/tomcat-10.0-doc/jdbc-pool.html
(12-14)

Resource references in the deployment descriptor
(12-15)

Using Java naming services to obtain a DataSource
(12-16)

Using the JavaEE resource injection to obtain a DataSource
link https://jcp.org/en/jsr/detail?id=250
(12-17)

JDBC: opening a connection through the DataSource (recommended in web applications!)
(12-18)

Example JDBC with connection pooling
material Java_Example_Servlet_Database
(12-19)

Example Final example on forms and databases: a file repository
material Java_Example_Uploader
(12-20)

Example How to create the digest of a file
(12-21)

Example JDBC: Get the auto-generated keys after an insert statement
(12-22)

Presentation of the final project specifications