SOFTWARE DESIGN AND WEB PROGRAMMING M - Z

Module WEB PROGRAMMING

The module deals with the methodological tools for the design of modern web-based information systems. In particular the module covers concepts for designing and developing the back-end (server-side programming) and front-end (client-side programming) of a web application. Particular emphasis will be given to the development of "responsive" front-ends The module covers also design and implementation techniques based on the Model-View-Controller (MVC) architectural pattern.

The module will finally presents elements on programming techniques for the implementation of interactive GUIs (e.g., React).

The learning objectives of the course, expressed according to the Dublin descriptors, are:

Knowledge and understanding

• Understanding the main design concepts of web information systems
• Understanding concepts and tools for the development of efficient back-end components and function front-end interfaces, that satisfy project requirements
• Understanding concepts and tools that support separation of responsibilities, roles and code reuse in the development of a web application

Applying knowledge and understanding

• Designing and implementing a multi-platform and multi-device web application, on both the client side and the server side
• Implementing web applications that handle data interaction (DBMS) and the integration with other web systems (REST API)
• Designing and implementing the user experience of a web application

Making judgements

• Analyzing functional and non-functional requirements
• Understanding the implications of design choices related to alternative software stacks, both server-side and client-side
• Understanding the implications of design choices related to change management and maintenance of alternative software stacks
• Understanding the performance issues associated to alternative software stacks

Communication skills

• Preparing web application specification documents, addressing the specificity of web applications
• Explaining the motivations behind specific design choices

Learning skills

• Learning how to use the tecnologies for the development of complex web applications
• Learning how to compare alternative projects schemese from different perspectives
• Learning to recognize design principles shared by apparently different architectural styles, data transmission mechanisms and development toolkits

Lectures, hands-on exercises, laboratory and seminars.

Should teaching be carried out in mixed mode or remotely, it may be necessary to introduce changes with respect to previous statements, in line with the programme planned and outlined in the syllabus.

Basic knowledge of programming and computer networks

Fundamentals of Web Programming and Server-Side Development

• HTML (3 hours)

• CSS and Flex/Positional Layouts (9 hours)

• The PHP Language (3 hours)

• HTML with PHP: Forms, Sessions, and Cookies (6 hours)

• Interaction between PHP, DBMS, and cURL (6 hours)

Client-Side Web Application Development

• The JavaScript Language: Functions, DOM, Object Model (window, document, form objects), Event Handling (12 hours)

• Responsive Web Design: CSS Selectors, Positional Selectors, and Object Operations (DOM Navigation and Manipulation) (3 hours)

• AJAX: Asynchronous Requests with Fetch, REST APIs, Handling Text and JSON Responses (3 hours)

Web Information Systems Design

• The MVC Architectural Pattern: Examples of Software Structuring within an MVC-Based Framework (3 hours)

• Laravel Framework: Introduction and Use for Developing Web Applications Following the MVC Paradigm (10 hours)

Instructor notes and reference documentation from Mozilla Developer Network and PHP.net.

The course offers two examination options:

1) Completion of homework during the course

For each major topic of the course, an individual project ("homework") will be assigned to be completed at home. The student must use this homework to demonstrate their mastery of the topic. Upon completion of all assigned homework, the final exam will consist of a discussion of the completed projects. This option is valid up to and including the second examination session; subsequently, the only permitted examination method will be the "single project" (see below). The homework assignments are designed so that the final homework satisfies the same specifications as the single project.

2) Single project

If the homework-based option is not chosen, the learning assessment exam will consist of completing a single project that encompasses all the topics studied in the course, followed by a discussion of the project.

---

Regardless of the chosen option, the discussion of the work will cover design choices, implementation aspects, theoretical questions, and practical questions (see the example questions). A passing grade will be achieved by meeting the minimum project specifications and demonstrating an awareness of the implementation choices made. The student's ability to use advanced features and techniques that go beyond the minimum specifications will also be evaluated.

The use of LLMs is not permitted for completing homework or the single project. The teacher reserves the right to deem the work insufficient in case of reasonable suspicion of LLM use (for example, if students are unable to explain or justify the code they submitted).

Discussion of Project Implementations

Example questions (non-exhaustive list):

• What does this line of code do?

• Which function handles this event?

• Which function handles this server-side request?

• How else could this functionality be implemented?

Theoretical Questions

Examples (non-exhaustive list):

• What are selectors in CSS?

• What values can the display property take in CSS, and what do they mean?

• How can you control the distance between an HTML element and the surrounding elements, or between the content and the border of the element?

• How is an event handled in JavaScript?

• How are form data read in PHP?

• How is an asynchronous request performed in JavaScript?

Practical Questions

Examples (non-exhaustive list):

• Write the code for two nested <div> elements whose borders are 20 pixels apart.

• Write JavaScript code to read the text content of all <span> elements with class C contained in a <div> with ID D.

• Write PHP code to read a variable passed via a GET parameter.