Course Plan

Week Date     Lecture Class Practical Class Project Deadline
1 23-27 Sep Course Presentation
UML Conceptual Model: Classes and associations.

Slides: Course Presentation | UML Conceptual Model 		No practical class
2 30 Sep
-
4 Oct		 Relational Model: Relations, tuples, attributes, keys and constraints; Conversion from UML to the relational model.

Slides: Intro to the Relational Model | Conversion to the Relational Model 		UML Exercises Group Formation
3 7-11 Oct SQL Data Definition Language: Table creation, data types and constraints; SQLite.

SQL Data Manipulation Language: Inserting, deleting and updating.

Slides: SQL DDL | SQL DML 		Relational Model Exercises Topic Choice
4 14-18 Out SQL Data Query Language: Database queries (selecting, filtering, set operations and joins).

Slides: SQL DQL 		SQL DDL Exercises | SQLite3 Guide | Solutions
5 21-25 Out HTML 5: Introduction, basic tags, tables, text formatting, common attributes and generic blocks; Forms, the semantic web, metadata and media tags.

Slides: HTML 5 		SQL DQL Exercises
6 28 Oct
-
1 Nov
No classes (FEUP Week)😎
 First Delivery
7 4-8 Nov CSS 3: Introduction, basic selectors and properties.

Slides: CSS 3 		HTML Exercises
8 11-15 Nov CSS 3: Positioning, specificity and inheritance.

Slides: CSS 3 		CSS Exercises
9 18-22 Nov Docker: Basic concepts; Starting up an Apache+PHP+SQLite container.

PHP: Basics (Variables, Strings, Control Structures, Arrays, Functions).

Slides: Docker | PHP 		CSS Exercises
10 25-29 Nov PHP: Retrieving and listing data from a database (HTTP Parameters, Databases, Error Handling).

Slides: PHP
Code: Online Shop (initial HTML & CSS) | (final PHP with listing) 		PHP Exercises

Working locally using Docker
11 2-6 Dec PHP: Registration, login and logout (Passwords, Headers, Sessions).

Code: Online Shop (final PHP with registration, login and logout) 		Project Support |
PHP Exercises
12 9-13 Dec PHP: Code organization, shopping cart (Includes, Best Practices).

Code: Online Shop (final PHP with organized code and shopping cart) 		Project Support |
PHP Exercises
13 16-20 Dec PHP: Pagination, search, file uploads.

Code: Online Shop (final PHP with pagination, search and file uploads) 		Project Support |
PHP Exercises
30 Dec Second
Delivery
2 Jan Project Presentations
(Zoom)		 Presentation
15 Jan 1st Phase Exam (Normal)
31 Jan 2nd Phase Exam (Recurso)


Classes

Lecture Classes (in person)

  • The lecture classes will take place in person, as long as the appropriate security measures can be applied.
  • Student attendance will not be recorded.

Practical Classes (in person)

  • The practical classes will take place in person, as long as the appropriate security measures can be applied.


Evaluation

Calculation of the final grade: 0.5 * Project + 0.5 * Exam

Project - Final grade of the project   |   Exam - Grade of the written exam

To obtain a passing grade, you must:

  • Complete and present the project, obtaining a minimum final grade of 8 (out of 20).
    The project comprises two different deliveries:
    • 30%: report containing the UML and relational models
    • 70%: implementation of a website using HTML, CSS and PHP
  • Get a minimum grade of 8 (out of 20) on the written exam


Project

Objective

The development of a small dynamic website using the technologies studied during the course.

Students will form groups of 3 elements to carry out the work throughout the semester. Once a group is formed, it should choose a topic for their project.

You will start by conceptualizing the database required by your topic using UML and the relational model. Based on this, you will then implement your database and the website (using SQL, HTML, CSS and PHP).

Group Formation and Topic Choice

Deadlines: see course plan

  • Group Formation:
    The project should be done in groups of 3 students. Students must register in a group in Moodle (Project > Group Formation).
    If by the end of the deadline for the group formation, there are still groups with less than 3 members, students without a group will be randomly assigned to fill in the gaps in these groups.

    A single 1-member or 2-member group will be allowed if, and only if, there are no other groups with less than 3 members that those students can join.

    Sometimes, students join the course only after the groups have been formed. In these (hopefully) rare cases, either:

    • the students will join any remaining group with less than 3 members (adopting their topic);
    • or, if there are no more groups with less than 3 members, an additional group will be created for these students.

  • Topic Choice:
    Each group must propose a topic for their project. The topic must be submitted via Moodle (Project > Topic Choice).
    This submission will not be graded. It should be a brief description (< 250 words) of what your project will be about; similar to the texts in the first group of UML exercises, but with less detail (for example, you do not need to specify the attributes).
    The professor will review your topic submission in order to assess if it has sufficient content on which to base your project, before you proceed.

    Tips for choosing a topic

First Delivery

Deadline: see course plan
Evaluation Weight: 30% of Project component

The first delivery will be a small PDF report (6 pages maximum), submitted via Moodle (Project > First Delivery), containing:

  • Cover with the name of the topic, full names, institutional emails and number of the practical class of all members of the group.
  • Description of your topic. Similar to the first group of UML exercises from the practical classes.
    Note: this is a description of your topic, not of your UML diagram. So do not use words like ‘class’, ‘association’, ‘attribute’, etc.
  • UML diagram that represents your topic. The UML diagram should have at least 8 classes and cover as much of the UML language as possible. However, please remember that quantity ≠ quality.
  • Relational model of the database. This is a conversion of the UML diagram, using the rules we studied.
    As a reference, 10-12 relations is a healthy count.

Suggestion: 1 page for cover, ~1 page for description, ~1 for UML diagram, ~1-2 pages for the relational model.

Second Delivery

Deadline: see course plan
Evaluation Weight: 70% of Project component

The second delivery will be a ZIP file submitted via Moodle (Project > Second Delivery), containing a single main folder with all the folders and files of the website itself:

  • An SQL script to create the database. Make sure the script runs without errors.
  • All HTML, CSS, PHP, images and other files.
  • An instructions file called README in the root of your project containing information about the authors and instructions on how to run the website. This file can be a Markdown file (with .md extension) or a simple text file, if you are not familiar with Markdown.
    The professor should only need to execute a docker run command (as explained here) in order to boot up the website. Test this before submitting.

You must write everything from scratch. No JavaScript, frameworks or external libraries are allowed (jQuery, Bootstrap, Angular, CSS pasted from StackOverflow, etc). Failure to respect this rule will be strongly punished.

See > HERE < how to set up the environment for your project using Docker.

Presentation

Evaluation Weight: evaluated as part of the second delivery

Some time after the second delivery, you must present your project. The presentation will be carried out via Zoom by each group to the professor. No slides are required, and only the working website should be presented.
Each group will have a total of 15 minutes to present their work:

  • 10 minutes to demonstrate the website functionality and highlight any parts of the code that they are particularly proud of, if they so desire.
  • 5 minutes for questions.

In preparation for the presentation:

  • Elect one member of the group who will share their screen in order to show the website. This, of course, does not mean that only one member will present. All members can (and should) present, but only one will be sharing the screen.
  • Organize the flow of your presentation and decide who will present which features of the website.
  • Test your website and make sure that there are no errors or bugs and that it is ready and working for the presentation. If you are late for the presentation or do not have your website ready to present, that time will come out of your 15 minutes and your grade will be penalized.

Penalty for Delays

When students do not deliver their work within the deadline, the whole group will receive a penalty of 0.07% for each minute past the deadline. Example: if you deliver a work 6 hours late, you will have a penalty of 25.2% (6*60*0.07). Deliveries submitted 24 hours or more after the deadline will not be considered and the group in question will receive a classification of zero.

Important: imagine something is missing from the work you submitted. If you submit a new version at a later time you will be penalized for delay over the entire work as if you had only submitted at the moment of the second submission. Check and double-check your submissions to avoid undesirable situations.

Words of Advice

Here is some advice and answers to common questions. For a successful and fun experience during the course, read these carefully.

  • Planning for the Second Delivery
    When you start working on the second delivery, the best way to organize your tasks is as follows:
    1. Read the comments the professor wrote on the PDF of your first delivery. If anything needs to be improved, make those changes on your UML and relational model. You will not submit the UML diagram or the relational model again on the second delivery, but it is important to make the changes suggested by the professor before the next step.
    2. Create the SQL script for your database. Start by looking at your relational model from your first delivery (after having made the changes requested by the professor) and convert it to SQL syntax. At the beginning of the script, do not forget to include the DROP statements and the command for enabling support for foreign keys.
    3. Set up the environment for your project using Docker (see instructions here.
    4. Start by creating the basic structure of your website with HTML files (follow examples from class).
    5. Add basic CSS to style your website (layout, colors, fonts, responsive design, etc).
    6. Add dynamic elements with PHP. Start by replacing static parts of your HTML with dynamic portions generated by PHP (do not forget to follow the organization of files we used in class).
    7. Write a README file with information about the authors and instructions on how to run the website with Docker.
    8. Do a final test of your website (using the instructions on your README) and check if everything works as expected.
    9. Zip and submit your project via Moodle (Project > Second Delivery).
    10. Close your laptop and take a deep breath. Now go have some fun. You deserve it!

  • Keep It Simple (KISS)
    Make your code simpler but cleaner (write less code and validate it as you go). If the website has so many issues that I cannot navigate it easily or even find all the features you implemented… your grade will suffer. Simple and working is always better than complex and buggy.

  • Learn to Use Git
    It is not mandatory for this project, but Git is a great way to keep track of code modifications within your team and merge changes into a clean, organized codebase. No more emailing ZIP files between your colleagues and copying and pasting the changes by hand!

    GitHub is a safe place to put your code while you are writing it, just make sure to create a private repository. They provide free Pro accounts for students and educators, so I think you should register here.

  • Unequal sharing of work
    If something is not going well in a group, I need to know as soon as possible, and I trust you to tell me of any anomalies. I will not enquire about this, and in the absence of any complaints, I will assume everything is OK with the group.

    I will not accept complaints about this after the grades are published.


Exam

Times and Locations

See course plan.

Necessary Materials

If it is not listed below, it should not be on your table. Any consultation materials (including the slides) deemed necessary for the exam will be made available in Moodle.

  • Writing material.
  • Blank paper sheet (provided by the professor). All questions will be answered in Moodle, so you can use the paper sheet simply as a draft. Anything written on the paper sheets will not be considered for evaluation.
  • Student card, which you will place on the corner of your table for easy checking; otherwise we will bother you during the exam unnecessarily.

Smartwatches and mobile phones must stay in your bags.

Format

The exam will be entirely done in Moodle. Please make sure to test your access to Moodle. Contact the FEUP Helpdesk to sort out any issues beforehand.

Regarding multiple choice questions
In some multiple choice questions you can choose more than one option, and an uncertain number of options are correct or wrong. Each wrong answer will result in a negative score, in such a way that if a student selects all answers in a question, the sum is zero.

In other multiple choice questions, you will only be able to choose one option. A wrong answer in questions where you can only choose one option will cause a penalty of -33.3(3)% for that question.

If you do not answer, you will get a score of 0.

Structure

  • UML Class Diagram: multiple choice and open-answer questions.
  • Conversion from UML to the Relational Model: multiple choice and open-answer questions.
  • SQL:
    • An SQL script will be provided in Moodle, that you must download and use to initialize your database. Please review how to initialize a database in SQLite3 beforehand, so you do not waste time during the exam.
    • In every exercise, you will be given a question and an expected output. You must provide an SQL query that returns a result that exactly matches the expected output (including the column names and the order of the rows).
    • Do not force your query to return the expected output. Even if your query produces the same output as the one presented in the exercise, it may not be considered correct. In the correction, we will test your queries against a database with the same structure as the one from the exam but with different data, designed to test more edge cases. To be considered correct, your query should still produce the correct output when ran against the correction database.
      For example, if the expected output is: 
      client_id   number_of_purchases
----------  -------------------
1           2

      And your query is:

      SELECT 1 AS client_id, 2 AS number_of_purchases;

      Your query is obviously incorrect, even though it produces the expected output.

  • HTML, CSS, PHP and Docker: multiple choice and open-answer questions.
  • PHP: code question.


Acknowledgements

Prof. André Restivo and Prof. João Rocha Silva are the original authors of most materials made available in this website.