Advanced
Web Applications

Project

Objectives

Versioned repository
Configuration
Code quality and PHP
Code quality and JavaScript

Versioned repository

.gitignore
.gitattributes
.gitkeep
vendor / node_module / ...
composer.lock / package-lock.json / ...
.htaccess
.env

Configuration

Runtime vs compile time configuration.
Environment variables.
.env file

Vite

Vite supports .env files and environment variables out of the box. Selected variables:

import.meta.env.BASE_URL
import.meta.env.PROD

To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code

It is possible to use variables also in the configuration file.

PHP

We can use build-in function and implement the functionality on our own using parse_ini_file.

Code quality and PHP

PHP_CodeSniffer is an essential development tool that ensures your code remains clean and consistent.

We can employ phpcs to detect code style violations.


php phpcs.phar --standard=PSR12 /path/to/code-directory

PSR-12: Extended Coding Style requires compliance with PSR-1: Basic Coding Standard. PSR-1 defines how to write PHP code, including how to write PHP tags, encoding, namespaces, naming, etc.. PSR-12 adds requirements for coding standard, tags, files, indentations, keywords, control structures, etc..

Some of the issues can be fixed using phpcbf.

Code quality and JavaScript

We utilize Prettier to take care of code formatting. While Prettier works with multiple source types, including PHP, we utilize it only in scope of Vite project. It may be usefull to consider IDE integration.

Another step is to utilize ESLint which statically analyzes the code.

While it is possible to run both tools using npx, we integrate both tools into our Vite project. Following slides assumes we have a Vite project with Typescript, like the one from practical-03.

Prettier


npm install --save-dev prettier

We can employ .prettierrc.json file to customize Prettier's options.


{
  "semi": true
}

This step is optional as we are setting the value to default.

ESLint

ESLint can be executed on demand or during the development to provide instantaneous feedback. Besides ESLint we also need plugins, for different languages, and configurations.


npm install -D eslint
# Integration with Prettier
npm install -D eslint-config-prettier eslint-plugin-prettier
# Integration with Typescript
npm install -D @typescript-eslint/eslint-plugin

ESLint utilizes .eslintrc.cjs, or other file depending on your setup, for configuration and .eslintignore to ignore directories. Alternatives are JSON file, YAML file, part of package.json, eslint.config files, etc..

Add following line to script section in your package.json file to execute ESLint in current directory.


"lint": "eslint ."

ESLint: .eslintrc.js


module.exports = {
  env: { // Global properties like document, process, etc..
    "browser": true,
    "es2021": true,
    "node": true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  plugins: ["prettier"],
  // Some options are redundant as they are part of the extended configurations.
  parserOptions: { sourceType: "module" },
  rules: {
    // We consider anything from prettier to be an error.
    "prettier/prettier": "error",
  },
};

ESLint: .eslintignore

We may need to ignore certain files and directories from linting. The idea is similar to .gitignore file.


node_modules/
dist/

There is also .prettierignore for Prettier. Yet since we plan to run Prettier via ESLint we do not need it.

Assignment: Project

The objective of this assignment is to apply principles from this seminar to your previous homeworks.

Check for Git related issues in all your homeworks.
Make sure PHP_CodeSniffer does not produce any error on any of your PHP files in practical-01, practical-02.
Make sure Prettier and ESLint do not produce any error with your projects from practical-03.
Add configuration to practical-02 and practical-03, see following slides for more details.

For PHP_CodeSniffer, Prettier, and ESLint employ configurations from this practical.

You must implement and submit the assignment before 5.4.2024 23:59 UTC.

Configuration for practical-02

Your application must be able to load following .env file.


DATABASE_NAME = articles_database
DATABASE_USER = admin
DATABASE_PASSWORD = 1234
BASE_URL = /~admin/cms

Load file from the root of your project directory, i.e. where composer.json file is. For each option (DATABASE_NAME, DATABASE_USER, ...) also check for environment variable of the same name. If the environment variable is set (consider getenv), it is used instead of the value from .env file.

Use values from configuration to set base path and configure database connection.

Configuration for practical-03