File Structure Guide

Relevant source files

The following files were used as context for generating this wiki page:

• apps/js/iite_components.js
• apps/pages.php
• apps/translations.json
• iite/overview.php
• iite/relationship.php
• inside/interface.php
• inside/overview.php
• research/overview.php
• themes/css/design.css
• themes/css/iite.css

This document provides a high-level overview of the file and directory structure for the Institute Itech website project. The architecture is based on a traditional PHP model, separating backend logic, frontend assets, and content. It employs a simple, file-based routing system and includes features for internationalization.

The structure is designed to separate concerns: PHP files handle server-side logic and page rendering, CSS files manage styling and layout, JavaScript controls client-side interactivity, and JSON files store multilingual text content. This guide details the purpose of key directories and files, explaining how they interact to form the complete web application.

Core Directory Structure

The project is organized into several top-level directories, each with a distinct responsibility. The primary directories are apps, themes, and various content-specific folders like iite, inside, and research.

Directory	Purpose
apps/	Contains application logic, including JavaScript, page definitions, and translation files.
themes/	Holds all presentation-layer files, such as CSS, assets (images, backgrounds), and PHTML templates.
iite/	Contains PHP entry points for the main "iite" section of the website.
inside/	Contains PHP entry points for the "inside" section of the website.
research/	Contains PHP entry points for the "research" section.

This diagram illustrates the high-level directory organization.

PHP Application Structure

The backend is driven by PHP files that act as controllers for different pages. These files handle session management, language settings, and rendering the final HTML by including template files (.phtml).

Page Rendering Flow

Each primary page (e.g., /iite/overview.php) follows a consistent pattern:

1. Starts a session.
2. Checks for a lang query parameter to set the session language.
3. Defines the page title using a lookup from apps/pages.php.
4. Uses output buffering (ob_start(), ob_get_clean()) to capture the content from a specific .phtml template.
5. Includes the main layout.phtml file, which renders the common page structure (header, footer) and injects the captured page-specific content.

This diagram shows the server-side rendering process for a typical page request.

A typical page controller looks like this:

<?php
session_start();

if (isset($_GET['lang'])) {
    $_SESSION['lang'] = $_GET['lang'];
    $cleanUrl = strtok($_SERVER["REQUEST_URI"], '?');
    header("Location: $cleanUrl");
    exit;
}

$lang = $_SESSION['lang'] ?? 'it';
$page = $_GET['page'] ?? 'iite_overview';
$translations = require __DIR__ . '/../apps/pages.php';
$title = $translations[$page][$lang] ?? $translations[$page]['en'] ?? 'Institute Itech';

// ...

ob_start();
include __DIR__ . '/../themes/apps/iite/overview.phtml';
$output_page = ob_get_clean();
include __DIR__ . '/../themes/components/statics/layout.phtml';

Sources: iite/overview.php:1-21

Frontend Assets

Frontend assets are managed within the apps/js and themes/css directories.

JavaScript (apps/js)

The file iite_components.js handles all major client-side interactivity.

Key functionalities include:

Functionality	Description
Page Navigation	Attaches click event listeners to elements with data-page attributes to handle client-side routing via location.href.
Logo Color Change	Dynamically changes the logo color based on the current page path by checking against a whitePages array.
Navbar Hiding	Hides the navigation bar on specific pages (e.g., /login) as a client-side fallback.
Cookie Management	Manages the display and dismissal of a cookie consent banner, storing the user's choice in localStorage.
Mobile Menu	Controls the open/close state of the mobile navigation menu.
Tabbed Interface	Implements a tabbed interface by toggling interface-active classes on elements.

Sources: apps/js/iite_components.js

The navigation logic is based on data-page attributes:

const pages = document.querySelectorAll('[data-page]');

pages.forEach(page => {
    page.addEventListener('click', () => {
        if (page.dataset.page === 'iite') {
            location.href = "http://localhost";
        } else if (page.dataset.page === 'insideiite') {
            location.href = "/inside/overview.php";
        } else if (page.dataset.page === 'research') {
            location.href = "#";
        } 
        // ... more pages
    });
});

Sources: apps/js/iite_components.js:3-21

Styling (themes/css)

The project uses two main CSS files:

• iite.css: Defines global styles, font imports (Barlow Semi Condensed), base element styling (headings, paragraphs), and a color palette using CSS variables.
• design.css: Contains the majority of the layout and component-specific styles. It makes extensive use of the variables defined in iite.css and includes responsive design rules via @media queries.

CSS variables are defined in the :root selector for global use.

:root {
    --static-background: #BFBFBF;
    --navbar-background: #02274c;

    --w-white: white;
    --w-black: black;
    --w-grey: #e9e9e9;
    --w-midnight: #222940;
    --w-blue: #0448d5;
    /* ... more colors */
}

Sources: themes/css/iite.css:3-19, themes/css/design.css:1-17

Internationalization (i18n)

The website supports multiple languages (Italian, English, French, Spanish) through a JSON-based translation system.

Translation Files

• apps/translations.json: A single JSON file containing all UI text strings. Each key maps to an object with language codes (it, en, fr, es) as keys and the translated strings as values.
• apps/pages.php: An array that maps internal page names (e.g., iite_overview) to their translated titles, used for the <title> HTML tag.

Example from translations.json:

{
  "hero_quote": {
    "it": "La mente è il codice sorgente dell’umanità.\nL’istruzione è il linguaggio con cui lo riscriviamo.",
    "en": "The mind is humanity’s source code.\nEducation is the language we use to rewrite it.",
    "fr": "L’esprit est le code source de l’humanité.\nL’éducation est le langage avec lequel nous le réécrivons.",
    "es": "La mente es el código fuente de la humanidad.\nLa educación es el lenguaje con el que lo reescribimos."
  }
}

Sources: apps/translations.json:2-7

Translation Logic

The language is determined by the $_SESSION['lang'] variable, which defaults to 'it'. A helper function t($key) is defined in the PHP page controllers to retrieve the correct string from the loaded translations array.

This sequence diagram illustrates how a translated string is fetched and displayed.