NSWI142: Preparation for Programming Test

The goal is to develop a simple web application for managing events. Users should be able to create, read, update, and delete (CRUD) events as well as register for the events. You must use assigned GitLab repository to develop your application. The application must be deployed at webik at {base-url}/, where {base-url} is https://webik.ms.mff.cuni.cz/~{username}/semestral-project.

User functional requirements

This section contains user functional requirements. The user requirements are provided by users not analysts. As a result, the user requirements leave room for an interpretation. Use your experience to fill in the details and build an application users would like to use.

The application is composed of the following screens:

Landing page
List all events page
Create an event page
An event detail page
Update an event page
Register for an event page
Register a new user page
Login page
List current user's events page
User detail page

Header

Every page must contain a header. The header consists of:

Logo or name of the project of your choice.
Navigation to the landing page.
Navigation to the event list page.

In addition, when the user is not logged in, the header must contain also:

A navigation to login page.

When the user is logged in, the header must contain also:

Name of the user as a navigation to the user detail page.
Navigation to the create an event page.
Navigation to the current users's events page.
A logout button or link.

Landing page

The page must be available at {base-url}/. It must contain:

List of 3 newest events. For each event, it must display:
- Name of the event.
- Start and end date.
- Name of the organizer.
- Navigation to the event detail.

List all events page

The page must be available at {base-url}/events. It must contain list of all events. For each event, the listing must display:

Name of the event.
Start and end date.
Name of the organizer.
Navigation to the event detail.

The event list must be paginated with page size being equal to 7.

Create an event page

The page must be available at {base-url}/events/new. The page must contain a form that allows users to register for the events. For each event, the user must be able to provide:

Name - string up to 64 characters.
Description - string up to 1024 characters.
Start date - must be in the future.
End date - equal or bigger then start date.
Hero image - user provided image.
List of workshops - The user can add one or more workshops. For each workshop, the user must be able to set a name.

An event detail page

The page must be available at {base-url}/events/{event-identifier}. It must contain:

Event name.
Event description.
Start and end date.
Hero image.
List of all workshops at the event.

If the user is not logged in, this is all the page contains.

If the user is the owner of the event, it contains a link to the update an event page.

If user is not an owner and is not registered for the event, it contains link to event registration.

If user is not an owner and is registered for the event, it contains button to cancel the registration.

Update an event page

The page must be available at {base-url}/events/{event-identifier}/edit. It is accessible only to the event owner. The page must allow the user to modify all properties of the event. In addition, the owner can also delete the event.

Register for an event page

The page must be available at {base-url}/events/{event-identifier}/register. It enables the user to register for an event and select which workshops, if any, they want to attend.

This page can also be used to update an existing registration for an event. In such case, the input fields are populated with user's provided data.

Register a new user page

The page must be available at {base-url}/register. It enables the user to create a new account. In order to create an account, the user must provide:

Full name.
E-mail address.

If a user with a given e-mail address already exists, the user is redirected to the login page instead of creating a new account.

Login page

The page must be available at {base-url}/login. In order to login, the user has to provide an e-mail address.

List current user's events

The page must be available at {base-url}/events/mine. It contains a list of all events the user is registered for. For each event, it must display:

Name.
Description.
Start and end date.
Hero image.
List of all workshops the user is registered for.

User detail page

The page must be available at {base-url}/settings. This page enables the user to change the user details with the exception of the e-mail.

In addition, the user can use this page to delete their account. Deleting the account also cancels all registrations.

Status pages

The application must utilize HTTP status codes to communicate client requests or server issues. Specifically, the application must implement status pages for:

404 Not Found
500 Internal Server Error

Each status page should provide a brief, user-friendly explanation of the issues and direct the user to the next action. For example, 403 may inform the user that they are not logged in and provide a link to the login page. If you have never seen an error page, you can draw inspiration from GitHub 404 page.

Non-functional requirements

This section contains non-functional requirements. The non-functional requirements are sometimes called quality requirements. They describe how the system performs its functions rather than what functions the system performs. They may also put constrain on how the system is implemented.

N01) Application must not use any third-party libraries or code/style snippets. You are allowed to draw inspiration from any publicly available sources. You must be the sole author of all of the code.
Failure to explain any part of the code is a sufficient reason for not accepting the solution.
You are allowed to use third party code to develop, or test your application.
N03) All data must be stored in a MySQL database.
N04) List current user's events page is rendered completely on the server side. This page must be usable with JavaScript disabled.
N05) List of all events page is server-side rendered and contains all articles. Pagination, and any other functionality on this site, must be handled on the client-side using JavaScript. The JavaScript must use Model-View-Presenter or equivalent design pattern.
N06) PHP application must utilize the front-controller design pattern.
N07) All server-side page rendering and processing must be implemented using Model-View-Presenter design pattern. The view is not allowed to communicate with the model directly. The rendering must be done in the view only. We strongly recommend to use templates.
N08) All HTML pages must be responsively styled using CSS.
N09) All HTML must be valid, no errors or warnings, according to W3C validator.
N10) All CSS must be valid, no errors or warnings, according to CSS validator, Level 3.
N11) All forms, e.g. at the Create an event page, validate inputs using HTML5 validation attributes.
N12) Application must be secured to basic injection attacks.

Data

All data, except for images, must be stored in a MySQL database.
You must store images in the data sub-directory in your project. Please update your git configuration to keep this file in the repository, but without the images.
All SQL commands to create the database must be part of your repository.
Please prepare test data to support smooth presentation of your application. The test data must be part of the repository, i.e. in form of SQL queries.
You do not need to store time for the start and end date of en event; day, month, and year are sufficient.

Code style and repository

You must use consistent code style in your projects. You can, and should, use different code styles for PHP, CSS, JavaScript, and SQL.
All development must be tracked using the provided GitLab repository. Commit your work on a regular basis. Your solution may not be accepted if you commit all files at once.
Your repository must contain a README.md file. The file must contain installation instructions, steps to initialize the database, and screenshots of the Landing page with 3 events, and Register for an event page.
The project should be reasonably structured. You must be able to explain the reasoning behind your project structure.

External resources

Any resources on the internet, namely StackOverflow, Github Copilot, or Chat GPT, can only be used to solve minor problems, not to solve the whole problem directly. Thus, searching/prompting for class and function implementations and architectural composition is forbidden. Searching for feature documentation, examples, and bugs is fine.

Although many tasks are solvable by today's AI, the restrictions ensure that you understand the core of web application development, which is necessary for more complex problems where skilled programmers are still needed. The rule of thumb is that you use AI, not the other way around. As a result, you must be able to fully explain, and provide reasoning, behind all of the code. Failure to do so will result in failing the test.

If you plan to employ any type of transpilation, like Typescript, let us know in advance, so we can specify the rules.

You must be able to demonstrate functionality of individual parts of your solution by providing examples which are not part of your source code.