ASSIGNMENT 2

CSE3CWA/CSE5006
(SEM2-2024)

GITHUB Initial Repository

Assignment - 2

1
TABLE OF CONTENTS

Assignment Guidelines: Individual Work, Deadlines, Objectives, and Submission Details .....................................3
Plagiarism .............................................................................................................................................................3
Due Date...............................................................................................................................................................3
Objectives .............................................................................................................................................................3
Submission Details and Penalties .........................................................................................................................3
SYSTEM OVERVIEW ..................................................................................................................................................4
File structure ........................................................................................................................................................4
Database PostgreSQL Structure Using Default Specification ...............................................................................4
Backend REST API .................................................................................................................................................4
Web App Functionalities Summary ......................................................................................................................5
TASKS ........................................................................................................................................................................7
Before you start ....................................................................................................................................................7
TASK 1 - User Interface Changes (10 MARKS) ......................................................................................................7
TASK 2 - Api Command Demonstrations (8 Marks) ..............................................................................................7
TASK 3 - Database Modelling with Sequelize and Test the API Commands When the Database Modification
Done (22 MARKS) .................................................................................................................................................8
TASK 4 - Expanding the Existing Tables (e.g. Company) - 30 MARKS ...................................................................9
TASK 5 - Front End (30 MARKS) ............................................................................................................................9
TASK 6 - Building a New Application - BONUS 20 MARKS ....................................................................................9

2
ASSIGNMENT GUIDELINES: INDIVIDUAL WORK, DEADLINES, OBJECTIVES, AND
SUBMISSION DETAILS

PLAGIARISM

This is assignment must be completed individually, not in groups. Don't try to plagiarise

DUE DATE

This assignment is due refer to the LMS deadline documentation. Penalties are applied to late assignments.

OBJECTIVES

• To combine what you have learnt in labs into a complete cloud-based web application. This project
encompasses various technologies including React, JavaScript, Node.js, NGINX, API, Sequelize inside
the Docker container.

SUBMISSION DETAILS AND PENALTIES

• Zip up everything in your project directory into one file (zip). Alternatively, you can also download
GitHub repository, rename it following the naming convention, and submit it.
o MAKE SURE YOU DO NOT INCLUDE node_modules folder in your submission as it takes a lot
of space to submit. You will be deducted of 5 points to your total mark (out of 100 points) for
including it. This folder is generated during the compilation of Node.js (when utilizing the
npm command to install packages).

• Your final submission must run in a clean virtual machine after invoking
o docker compose up --build
o This is the environment that we will be using to mark your assignment.
• File naming convention in zip format:
o File Naming Convention in the submission: A2-firstName-studentID. For example, A2-Mario-
12345678.zip

o The easiest way is to download the ZIP file from your GitHub repository and rename it, as it
does not contain node_modules folder.

3
SYSTEM OVERVIEW

FILE STRUCTURE

• The default file structure is as follows:

Cloud-based web application contains the folders and file's structure like the
picture in the left. There are four main folders to be notified:
1. models: this folder contains js files that model the table in the
postgresql database.
2. controller: this folder contains js files that create, retrieve, update,
and delete tuples in the postgresql database. It utilizes ORM
sequelize.
3. components: control the user interface using React to create
components and managing states. For example, in AddContact.js
code, it interacts with an API to perform CRUD operations on a
database. After creating a contact successfully (as indicated by
receiving an id in the response), the code updates the User
Interface by adding the new contact to the list of contacts
(setContacts([...contacts, data])). This ensures that the user sees
the newly created contact reflected in the UI.
4. routes (not shown): contain js files that define routes for handling
CRUD (Create, Read, Update, Delete) operations on your table. Each
route corresponds to a specific CRUD operation. For example, POST
/contacts/: This route is responsible for creating a new contact. It is
associated with the create function from the contacts controller.

DATABASE POSTGRESQL STRUCTURE USING DEFAULT SPECIFICATION

• The database default is set in PostgreSQL and have two tables: contacts and phones as described
below:

o
o The relationship between contacts and phones is one-to-many relationships

BACKEND REST API

• The backend shall expose the following REST API:

HTTP Action Description

Returns a list of all contacts (does not include phone
GET /contacts numbers).
This endpoint has been created for you already.
GET /contacts/:contactId/phones Returns a list of all phone numbers for a particular contact.
Creates a new contact using the posted data. Returns the
POST /contacts
new contact.
GET /contacts/:contactId Returns a single contact by ID.

4
 Deletes a single contact by ID. All of the contact’s phone
DELETE /contacts/:contactId
numbers shall be deleted also. Returns an empty object, {}.
Updates the attributes of a particular contact. Returns the
PUT /contacts/:contactId
updated contact.
Creates a new phone number using the posted data.
POST /contacts/:contactId/phones
Returns the new note.
GET /contact/:contactId/phones/:phoneId Returns a single phone number by ID.
Deletes a single phone number by ID. Returns an empty
DELETE /contact/:contactId/phones/:phoneId
object, {}.
Updates the attributes of a particular phone number.
PUT /contact/:contactId/phones/:phoneId
Returns the updated phone number.

WEB APP FUNCTIONALITIES SUMMARY

Web application have several functionalities:

- The highest-level component is App component which is in the root App.js.

- App component has several child components: AddContact, Contact, and Stats components. We do
not use the Stats component in this assignment.
- The modified components are described as follow:
o AddContact component is controlled by AddContact.js and its function is to add the contact
in the User Interface. Functionalities: when the users successfully create a new contact, name
and address are added to the contact list (Contact component).

The overall box highest-level component is App

component

- The top part shows the process of creating

a new contact (AddContact) with Name:
Choiru and Adress: BUS BUILDING 114
which has not been created.
- The bottom part shows the contact
summary with Name: Choiru and Address:
Bendigo has previously been created.
o This part can be expanded and
collapsed to see the Phone list
of the associated contact.
- The Stats (hidden)

o When a new contact is successfully created, the Contact component can expand and collapse
the Contact Summary. The Contact component is managed by Contact.js.

5
 o Delete a contact (red button delete contact): the app also allows us to delete a contact in the
in the contact list. It is also managed inside Contact.js.
o The figure below shows the expanded Contact component. Left figure when, we want to add
new Phone (AddPhone). Right figure shows the status when a work phonetype has
successfully been created.
o PhoneSummary component displays the phonetype that have been created. You can see that
a phone type can be deleted (red button). However, there is no update phone functionality
yet.

- Contact component stores phone related (children) components: PhoneSummary, PhoneList, and
AddPhone.

6
 o Addphone is controlled by Addphone.js which allows you to add phonetype of the contact
(e.g. Home, Work, Mobile, and Others), and phone number.
o PhoneList and PhoneSummary display how many phones created in the contact.
PhoneSummary also has functionalities to delete each component of the PhoneList.

TASKS

BEFORE YOU START

1. Download zip file, create repository, and invite your lecturer as a collaborator:
a. Navigate to the Assignment - 2 repository.
b. Download the repository, extract the zip file.
c. Create the repository (in public first) with the name following the pattern A2-Mario-
12345678, upload the extracted file, and commit the repository.
d. Make it private and invite your lecturer as a collaborator.
You can watch these steps in this video.
e. Now you have a new private repository as your basis of code.
f. You need to do it before week 6 ends, penalty applied.
2. Clone your repository and compile the application using docker compose up –build command. Make
sure that this application is running.
3. Documentation and Code:
a. Edit the README.md file to include your repository link, task completion details,
screenshots, and explanations.
b. Modify any necessary JavaScript files to complete the tasks.
c. The README.md will be reviewed to assess your work.
4. Commit and Push Your Changes:
a. Regularly commit your changes with descriptive messages and push them to your forked
repository.

TASK 1 - USER INTERFACE CHANGES (10 MARKS)

1. Change the button label from contact component from "Delete" to "Delete Contact" (2 Marks)
2. Change the button label in phone component from "Add" to e.g "Add Choiru’s Phone" (3 Marks)
3. Change the placeholder text "Name" with input type text into a drop-down menu with 4 categories (3
Marks)
4. In the <tr> element of the table, change the label "Name" to "Phone Type" (2 Marks)

TASK 2 - API COMMAND DEMONSTRATIONS (8 MARKS)

Perform the following API commands on the existing application API and provide screenshots of the output for
each command:

1. Show the API command for “Show Contact” and provide a screenshot of the output (1 Mark)
2. Show the API command for “Add Contact” and provide a screenshot of the output (1 Mark)
3. Show the API command for “Delete Contact” and provide a screenshot of the output (1 Marks)
4. Show the API command for “Update Contact” and provide a screenshot of the output (1 Marks)
5. Show the API command for “Show Phone” and provide a screenshot of the output (1 Mark)
6. Show the API command for “Add Phone” and provide a screenshot of the output (1 Marks)
7. Show the API command for “Delete Phone” and provide a screenshot of the output (1 Marks)
8. Show the API command for “Update Phone” and provide a screenshot of the output (1 Marks)

7
TASK 3 - DATABASE MODELLING WITH SEQUELIZE AND TEST THE API COMMANDS WHEN THE
DATABASE MODIFICATION DONE (22 MARKS)

1. Modify the contacts Table (5 Marks):

a. Update the contacts table to include the following attributes:
i. id
ii. Name
iii. Address
2. Modify the phones Table (5 Marks):
a. Update the phones table to include the following attributes:
i. id
ii. phone_type
iii. phone_number
iv. contactId
3. Adjust the Front-End (4 Marks):
a. Modify the front-end to align with the updated backend structure.
4. Test All APIs related to table modified contacts and phones (8 Marks):
a. Test all APIs (a total of 8 APIs) in the same manner as Task 2. There will be 4 API commands,
and each of them worth 2 marks. Below are examples of 2 API commands for reference.

POST Method

GET Method

8
TASK 4 - EXPANDING THE EXISTING TABLES (E.G. COMPANY) - 30 MARKS

1. Table Creation: Create a new table named `companies` with the following attributes (18 Marks):
a. company_id: Primary key, uniquely identifies each company
b. company_name: Name of the company
c. company_address: Address of the company
d. contact_id: Foreign key referencing contact_id in the contacts table

2. API Creation: Develop four APIs to manage records in the companies table, like Task 2 (12 Marks).
a. Each API will be worth 3 marks

TASK 5 - FRONT END (30 MARKS)

1. Create a front-end interface to manage the newly created companies table, including functionality for
adding, editing, deleting, and updating records.
2. Ensure that changes made through the front-end persisted in the database.
3. Make sure that the process should be documented, and screenshot should be captioned in
Readme.md file

TASK 6 - BUILDING A NEW APPLICATION - BONUS 20 MARKS

For this new application task, you should create a separate folder. Copy and modify the assignment2
folder, and zip it with the pattern name like A2-Mario-12345678-Bonus.zip. So, you will submit two
files. Here are the tasks:
1. Design a Database Structure
a. Create at least three tables that are entirely different from previous tasks, each with a
minimum of two attributes. Example configuration:

items
• item_id: Primary Key, unique identifier for each item

9
 • item_name: Name of the item
• item_price: Price of the item
customers
• customer_id: Primary Key, unique identifier for each customer
• customer_name: Name of the customer
• customer_email: Email of the customer
orders
• order_id: Primary Key, unique identifier for each order
• order_date: Date when the order was placed
• customer_id: Foreign Key referencing customer_id in the customers table
• item_id: Foreign Key referencing item_id in the items table

2. API Implementation
a. Demonstrate at least 12 APIs covering operations such as GET, UPDATE, CREATE, and POST for
each table.
b. All APIs capable of manipulating the data across all tables.
3. Data Persistence
a. The database must persist data accurately across all operations.
4. Front-End/User Interface
a. Create a front-end interface that accesses the three tables and covers the update operations
for either customers, items, or orders.
5. Documentation will cover:
a. The files created for the models.
b. The setup of the routes.
c. A detailed explanation of how the functionalities (GET, UPDATE, CREATE, POST) are
implemented and working.
d. Front-End capture and explanation

10