Merge branch 'main' into api

.github/workflows/test.yml

@@ -11,25 +11,59 @@ permissions:
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
+    env:
+      TEST_DB_NAME: cafe_test
+      DB_USER: root # do not change
+      DB_PASSWORD: root # do not change
+
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.1'
+          extensions: mbstring, intl
+          ini-values: post_max_size=256M, max_execution_time=180, variables_order="EGPCS"
+          coverage: xdebug
+          tools: php-cs-fixer, phpunit
+
+      - name: Setup database
+        run: |
+          sudo /etc/init.d/mysql start
+          mysql -e "CREATE DATABASE IF NOT EXISTS $TEST_DB_NAME;" -u$DB_USER -p$DB_PASSWORD
+          mysql -D$TEST_DB_NAME -u$DB_USER -p$DB_PASSWORD -hlocalhost -P3306 < "resources/database/dump/cafe.sql"
+          mysql -e "USE cafe_test; SHOW TABLES;" -u$DB_USER -p$DB_PASSWORD
+
+      - name: Create .env file
+        env:
+            ENV: |
+              PUBLIC_ROOT="http://localhost/steamy-sips/public"
+              DB_HOST="localhost"
+              DB_USERNAME="root"
+              DB_PASSWORD="root"
+              TEST_DB_NAME="cafe_test"
+              BUSINESS_GMAIL=""
+              BUSINESS_GMAIL_PASSWORD=""
+        run: |
+          echo "$ENV" > src/core/.env
+          cat src/core/.env
 
       - name: Validate composer.json and composer.lock
         run: composer validate --strict
 
       - name: Cache Composer packages
         id: composer-cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: vendor
           key: ${{ runner.os }}-php-${{ hashFiles('**/composer.lock') }}
           restore-keys: |
             ${{ runner.os }}-php-
 
-      - name: Install dependencies
+      - name: Install Composer dependencies
         run: composer install --prefer-dist --no-progress
 
       - name: Run test suite

docs/CODING_STANDARDS.md

@@ -4,16 +4,19 @@ Adhering to a standard helps maintain code quality, readability, and consistency
 
 ## PHP
 
-All PHP files follow the [PSR-12](https://www.php-fig.org/psr/psr-12/) coding style.
+- All PHP files follow the [PSR-12](https://www.php-fig.org/psr/psr-12/) coding style.
+- `phpDocs` is used for documentation.
 
 ## JavaScript
 
-`Prettier` is used for formatting and `ESLint` is used for linting.
+- [`jsDocs`](https://en.wikipedia.org/wiki/JSDoc) is used for documentation.
+- `Prettier` is used for formatting
+- `ESLint` is used for linting.
 
 ## CSS
 
-`Prettier` is used for formatting.
+- `Prettier` is used for formatting.
 
 ## SQL
 
-https://www.sqlstyle.guide
+- Some guidelines from the [SQL Style Guide](https://www.sqlstyle.guide) have been followed.

docs/DB_DESIGN.md

@@ -32,11 +32,11 @@
 
 ### administrator
 
-| Attribute     | Description                                       | Data Type    | Constraints                                       |
-| ------------- | ------------------------------------------------- | ------------ | ------------------------------------------------- |
-| user_id       | ID of administrator                               | INT(11)      | PRIMARY KEY, FOREIGN KEY REFERENCES user(user_id) |
-| job_title     | Job title of administrator                        | VARCHAR(255) | NOT NULL, Must have length > 0                    |
-| is_superadmin | Whether the administrator is a super admin or not | TINYINT(1)   | DEFAULT false                                     |
+| Attribute      | Description                                       | Data Type    | Constraints                                       |
+|----------------| ------------------------------------------------- | ------------ | ------------------------------------------------- |
+| user_id        | ID of administrator                               | INT(11)      | PRIMARY KEY, FOREIGN KEY REFERENCES user(user_id) |
+| job_title      | Job title of administrator                        | VARCHAR(255) | NOT NULL, Must have length > 0                    |
+| is_super_admin | Whether the administrator is a super admin or not | TINYINT(1)   | DEFAULT false                                     |
 
 ### client
 

docs/FILESYSTEM.md

@@ -1,6 +1,6 @@
 # Filesystem
 
-The filesystem for this project was adapted from https://github.com/php-pds/skeleton.
+The filesystem for this project was adapted from the [`pds/skeleton package`](https://github.com/php-pds/skeleton).
 
 ## Summary
 
@@ -9,7 +9,6 @@ A package MUST use these names for these root-level directories:
 | If a package has a root-level directory for ... | ... then it MUST be named: |
 |-------------------------------------------------|----------------------------|
 | command-line executables                        | `bin/`                     |
-| configuration files                             | `config/`                  |
 | documentation files                             | `docs/`                    |
 | web server files                                | `public/`                  |
 | other resource files (eg. sql files)            | `resources/`               |
@@ -38,14 +37,6 @@ files, it MUST be named `bin/`.
 This publication does not otherwise define the structure and contents of the
 directory.
 
-### config/
-
-If the package provides a root-level directory for configuration files, it MUST
-be named `config/`.
-
-This publication does not otherwise define the structure and contents of the
-directory.
-
 ### docs/
 
 If the package provides a root-level directory for documentation files, it MUST
@@ -59,6 +50,12 @@ directory.
 If the package provides a root-level directory for web server files, it MUST be
 named `public/`. **This directory is intended as a web server document root.**
 
+| Subdirectory Name | Description                                                              |
+|-------------------|--------------------------------------------------------------------------|
+| assets/           | Contains static assets such as images, fonts, or other resources.        |
+| js/               | Stores JavaScript files responsible for client-side scripting behaviors. |
+| styles/           | Holds CSS files defining styles and layouts for the application's views. |
+
 ### resources/
 
 If the package provides a root-level directory for other resource files, it MUST
@@ -67,35 +64,17 @@ be named `resources/`.
 This publication does not otherwise define the structure and contents of the
 directory.
 
-#### resources/database
-All SQL files must be placed inside the `database` sub-folder:
-
-```
-|-- /database
-|   |-- /schema
-|   |   |-- schema.sql           # Database schema definition
-|   |
-|   |-- /stored_procedures
-|   |   |-- procedure1.sql       # Stored procedure scripts
-|   |   |-- procedure2.sql
-|   |
-|   |-- /views
-|   |   |-- view1.sql            # Database view scripts
-|   |   |-- view2.sql
-|   |
-|   |-- /triggers
-|   |   |-- trigger1.sql         # Database trigger scripts
-|   |   |-- trigger2.sql
-|   |
-|   |-- /sqldump
-|       |-- backup.sql           # SQL dump of the database
-|
-```
-
 ### src/
 
 If the package provides a root-level directory for **PHP source code files**, it
-MUST be named `src/`. The structure of this directory follows the MVC pattern.
+MUST be named `src/`. The structure of this directory follows the Model-View-Controller (MVC) pattern.
+
+| Subdirectory Name | Description                                                                                                                                                    |
+|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| controllers/      | Houses PHP files responsible for handling incoming requests, processing data, and orchestrating the flow of the application.                                   |
+| core/             | Encapsulates essential classes, functions, and utilities forming the foundational elements of the application.                                                 |
+| models/           | Contains PHP files representing the application's data structures and business logic, facilitating interaction with the database and enforcing business rules. |
+| views/            | Contains PHP templates or files responsible for presenting data to the user, focusing on rendering user interfaces and facilitating user interaction.          |
 
 ### tests/
 

docs/INSTALLATION_GUIDE.md

@@ -10,8 +10,9 @@ some commands may differ. Please adapt accordingly.
 - MySQL (v15.1 preferred)
 - Composer with its executable on your $PATH
 - Git
+- NPM (optional)
 
-## Setup project
+## Project setup
 
 Navigate to the document root of your server:
 
@@ -56,14 +57,14 @@ BUSINESS_GMAIL_PASSWORD=""
 Some important notes:
 
 - Update the values assigned to `DB_USERNAME` and `DB_PASSWORD` with your MySQL login details.
-- If your Apache server is serving from a port other than the default one, add the new port number to `PUBLIC_ROOT` (
-  eg., `http://localhost:443/steamy-sips/public`) .
+- If your Apache server is serving from a port other than the default one, include the port number to `PUBLIC_ROOT` (
+  e.g., `http://localhost:443/steamy-sips/public`) .
 - `BUSINESS_GMAIL` and `BUSINESS_GMAIL_PASSWORD` are the credentials of the Gmail account from which emails will be sent
   whenever a client places an order. It is recommended to use
   a [Gmail App password](https://knowledge.workspace.google.com/kb/how-to-create-app-passwords-000009237)
   for `BUSINESS_GMAIL_PASSWORD` instead of your actual gmail account password.
 
-## Setup production database
+## Database setup
 
 Start your MySQL server and connect to its monitor:
 
@@ -76,32 +77,37 @@ mysql -u <username> -p
 
 Create a database `cafe`:
 
-```bash
+```sql
 create database cafe;
-```
-
-Select the database:
-
-```
 use cafe;
+source resources/database/dump/cafe.sql;
+exit;
 ```
 
-Import data to the database from the SQL dump:
+The path to the SQL dump might must be modified if you are not in the root directory of the project.
 
-```bash
-source resources/database/dump/cafe.sql
-```
+If you want to run unit tests with composer, you must first set up a separate database for testing. To do so, repeat the
+same
+instructions as above except name the testing database `cafe_test`:
 
-The path to the SQL dump might must be modified if you are not in the root directory of the project.
+```sql
+create database cafe_test;
+use cafe_test;
+source resources/database/dump/cafe.sql;
+exit;
+```
 
-## Setup testing database
+## PHP setup
 
-If you want to run tests for the application, you must setup a database for testing. To do so, repeat the same
-instructions as the setup for the production database except name the testing database `cafe_test`.
+Ensure that the [`variables_order`](https://www.php.net/manual/en/ini.core.php#ini.variables-) directive in
+your `php.ini`
+file is set to `"EGPCS"`. Without this, the application will
+not be able to load environment variables properly in `src/core/config.php` and you will get an array key error.
+You can use `php --ini` to find the location of your `php.ini` file.
 
-## Setup linting and formatting
+## Linting and formatting setup
 
-This step is optional if you do not plan on editing the JS and CSS files. Node.js is required to install the linter and
+This step is optional if you do not plan on editing the JS and CSS files. NPM is required to install the linter and
 formatter for JS and CSS files. For more details on the linters and formatters used, see
 our [coding standards](CODING_STANDARDS.md).
 

docs/USAGE_GUIDE.md

@@ -17,9 +17,9 @@ Optionally, you can display a live error log:
 sudo tail -f /var/log/apache2/error.log
 ```
 
-Go to http://localhost/steamy-sips/public/ (or the value you have set for `PUBLIC_ROOT` in
-your [`src/core/.env`](../src/core/.env)
-in your browser to see the website.
+Enter the `PUBLIC_ROOT` value (e.g., http://localhost/steamy-sips/public/) from [`src/core/.env`](../src/core/.env) in
+your browser
+to access the client website.
 
 ## Run tests
 
@@ -34,5 +34,5 @@ composer test
 To export database with `mysqldump`:
 
 ```bash
-mysqldump -u root -p cafe > cafe.sql
+mysqldump -u root -p cafe > resources/database/dump/cafe.sql
 ```

public/js/add-to-cart.js

@@ -0,0 +1,32 @@
+import { Cart, CartItem } from "./cart";
+import ModalManager from "./modal";
+
+const modal = ModalManager("my-modal");
+
+function handleAddToCart(e) {
+  // capture form submission
+  e.preventDefault();
+
+  // extract form data
+  const formData = new FormData(e.target);
+  const formProps = Object.fromEntries(formData);
+
+  const item = CartItem(
+    parseInt(formProps.product_id, 10),
+    parseInt(formProps.quantity, 10),
+    formProps.cupSize,
+    formProps.milkType,
+  );
+  Cart().addItem(item);
+
+  // open modal to display success
+  modal.openModal();
+}
+
+window.addEventListener("DOMContentLoaded", function () {
+  document
+    .getElementById("product-customization-form")
+    .addEventListener("submit", handleAddToCart);
+});
+
+modal.init();

public/js/cart-uploader.js

@@ -0,0 +1,26 @@
+import { Cart } from "./cart";
+
+/**
+ * This script is executed when user accesses /cart. It sends the cart
+ * data from localStorage to the server and then reloads the page.
+ * @returns {Promise<void>}
+ */
+async function uploadCart() {
+  // send cart data to server
+  const items = Cart().getItems();
+  console.log(items);
+  const request = await fetch(window.location.href, {
+    method: "POST",
+    // redirect: "follow",
+    body: JSON.stringify(items),
+  });
+  // console.log(request);
+
+  // add loading delay of 1s
+  await new Promise((r) => setTimeout(r, 1000));
+
+  // reload page so that server can display the order details
+  location.reload();
+}
+
+window.addEventListener("DOMContentLoaded", uploadCart);