Public Information Pages
Relevant source files
The following files were used as context for generating this wiki page:The Public Information Pages are a collection of static content pages within the /iite/ directory, forming a core part of the website's public-facing information about the Institute Itech organization. These pages are built using a simple PHP templating system that supports internationalization (i18n) and a consistent layout structure. They cover topics such as the company's overview, structure, relationships, and values.
The system is designed for simplicity, with each page corresponding to a PHP file that handles basic setup, language detection, and content inclusion before rendering a final HTML document through a master layout file.
System Architecture
The architecture for rendering these pages is a straightforward server-side include model. Each public-facing URL (e.g., /iite/company.php) maps directly to a PHP file on the server. This file acts as a controller, setting up the environment, and then including presentation-layer files (.phtml) to generate the final HTML.
Sources: iite/company.php, iite/overview.php, iite/relationship.php
Page Request Flow
The following diagram illustrates the process of a user requesting a public information page.
This sequence shows how a single PHP file orchestrates the inclusion of content and layout templates to build the final page.
Sources: iite/company.php:1-23, iite/overview.php:1-23
Core Components
The system is composed of several key file types that work together.
| Component | Path Example | Description |
|---|---|---|
| Page Controller | iite/company.php | The entry point for a page request. Handles session, language, and includes the PHTML files. |
| Content Template | themes/apps/iite/company.phtml | A .phtml file containing the specific HTML content for one page. |
| Master Layout | themes/components/statics/layout.phtml | The main site template that provides the <html>, <head>, <body>, navbar, and footer. It renders the content from the $output_page variable. |
| Page Translations | apps/pages.php | A PHP array containing page titles translated into multiple languages. |
| String Translations | apps/translations.json | A JSON file containing various UI string translations for the entire application. |
| Styling | themes/css/design.css | Main CSS file defining the grid layouts, component styles, and overall visual design for these pages. |
Sources: iite/company.php:20-22, apps/pages.php, themes/css/design.css
Page Implementation Pattern
All public information pages in the /iite/ directory follow an identical PHP structure. This ensures consistency and simplifies maintenance.
Standard PHP Structure
A typical page file, such as iite/company.php, performs the following steps:
- Starts a
session_start(). - Checks for a
langGET parameter to update the language in$_SESSION['lang']. If found, it reloads the page to apply the change. - Sets the current language (
$lang) from the session, defaulting to 'it'. - Loads the page title translations from
apps/pages.php. - Defines a
t()function to retrieve the correct translation for a given key. - Uses output buffering (
ob_start(),include,ob_get_clean()) to capture the rendered HTML from the page-specific.phtmlfile into the$output_pagevariable. - Includes the master
layout.phtmlfile, which then uses$output_pageto display the content.
// Source: iite/company.php:1-23
<?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_company';
$translations = require __DIR__ . '/../apps/pages.php';
$title = $translations[$page][$lang] ?? $translations[$page]['en'] ?? 'Institute Itech';
function t($key) {
global $translations, $lang;
return isset($translations[$key][$lang])
? str_replace('\n', '<br>', $translations[$key][$lang])
: ucfirst(str_replace('_', ' ', $key));
}
ob_start();
include __DIR__ . '/../themes/apps/iite/company.phtml';
$output_page = ob_get_clean();
include __DIR__ . '/../themes/components/statics/layout.phtml';
Sources: iite/company.php:1-23, iite/overview.php:1-23, iite/relationship.php:1-23, iite/valuethic.php:1-23
Internationalization (i18n)
The site supports multiple languages (Italian, English, French, Spanish). The language is managed via a session variable and can be changed with a URL parameter.
Language Switching
The language is controlled by $_SESSION['lang']. A user can switch the language by adding ?lang=<lang_code> to the URL. The server then sets the session variable and reloads the page without the query parameter.
This diagram shows the two-step process for changing the site's language.
Sources: iite/company.php:3-8, iite/overview.php:3-8
Translation Sources
Page titles are sourced from a PHP array defined in apps/pages.php. Each page has a unique key, and the array provides the title in each supported language.
Example from apps/pages.php:
<?php
return [
// ...
'iite_company' => [
'it' => 'La nostra società: Institute Itech',
'en' => 'Our company: Institute Itech',
'fr' => 'Notre société : Institute Itech',
'es' => 'Nuestra empresa: Institute Itech',
],
'iite_relationship' => [
'it' => 'Relazioni: Institute Itech',
'en' => 'Relationships: Institute Itech',
'fr' => 'Relations : Institute Itech',
'es' => 'Relaciones : Institute Itech',
],
// ...
];
Other text content used throughout the site is stored in apps/translations.json with a similar key-value structure for each language.
Sources: apps/pages.php:13-25, apps/translations.json
Styling and Layout
The visual presentation of the public information pages is controlled by themes/css/design.css. These pages utilize a CSS grid system for layout.
Key CSS Classes
The company.phtml and other related templates use specific classes to structure the content into a responsive grid.
| Class Name | Purpose | Example Usage |
|---|---|---|
.background-company-1 | Sets the container height for the company page. | The main wrapper for the company page grid. |
.grid-company | A generic container for a card-like element within the grid. | Used for company-info, company-research, company-ethic, etc. |
.company-info | A specific grid item for the main company information block. | grid-column-start: 1; grid-column-end: 13; |
.company-research | A grid item for the research and development block. | grid-column-start: 13; grid-column-end: 21; |
.company-ethic | A grid item for the ethics block. | grid-column-start: 6; grid-column-end: 11; |
.company-title-white | Sets text color to white for use on dark/image backgrounds. | <h5> tags inside image-backed grid items. |
.company-title-black | Sets text color to black for use on light backgrounds. | <h5> tags inside .company-ethic (which has a light grey background). |
These classes define a complex, multi-column grid layout that arranges content blocks in a mosaic pattern.
Sources: themes/css/design.css:530-740
Client-Side Behavior
The file apps/js/iite_components.js adds client-side interactivity, including navigation and dynamic styling.
Navigation
Click handlers are attached to elements with a data-page attribute. These handlers redirect the user to the corresponding page.
// Source: apps/js/iite_components.js:3-21
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 === 'departments') {
location.href = "/departments/overview.php";
}
// ... other pages
});
});
Sources: apps/js/iite_components.js:3-21
Dynamic Logo Color
The script also changes the color of the site logo based on the current page path. For several of the public information pages, the logo color is set to black.
// Source: apps/js/iite_components.js:24-37
const logo = document.getElementById('iitelogo');
const path = window.location.pathname;
const whitePages = [
'/iite/company',
'/iite/wep',
'/iite/relationship',
'/departments/overview',
'/inside/overview',
'/inside/ets.php'
];
if (logo) {
const isWhite = whitePages.some(page => path.includes(page));
logo.style.color = isWhite ? 'black' : '#ffffff';
}
This logic ensures the logo has appropriate contrast against different page backgrounds. The list includes /iite/company and /iite/relationship.
Sources: apps/js/iite_components.js:24-37