Adding a New Public Page

Relevant source files

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

• apps/pages.php
• index.php
• iite/overview.php
• research/overview.php
• apps/js/iite_components.js
• apps/translations.json
• login.php
• inside/interface.php

This document outlines the process for creating and integrating a new public-facing page within the website. The system uses a server-side PHP architecture for rendering pages, with a shared layout, individual page logic files, and separate template files for content. Internationalization is handled through a combination of a PHP array for page titles and a central JSON file for all other text content.

The core of the page-rendering mechanism involves a main PHP file for each page that sets up the environment, captures the page-specific HTML from a .phtml template using output buffering, and then injects this content into a master layout file (layout.phtml). This creates a consistent structure across all pages.

Server-Side Page Rendering Flow

The process of rendering a page is initiated when a user accesses a specific PHP file (e.g., /iite/overview.php). This file is responsible for setting the page title, handling language settings, and including the appropriate content template before wrapping it in the site's global layout.

The following diagram illustrates the server-side rendering flow for a typical page request.

Step-by-Step Guide

1. Create the Page's PHP File

First, create a new PHP file in the appropriate directory (e.g., mynewsection/mypage.php). This file acts as the controller for the page. It must perform several key actions:

1. Start the session to handle language persistence.
2. Define the page's unique key (e.g., mynewsection_mypage).
3. Load the page title translations from apps/pages.php.
4. Use output buffering (ob_start() and ob_get_clean()) to capture the HTML from its corresponding .phtml view file.
5. Store the captured HTML in the $output_page variable.
6. Include the main layout file, themes/components/statics/layout.phtml, which will use the $output_page variable.

<?php
    // Example: research/overview.php
    $title = "The Research | Institute Itech™"; // Set a static title

    ob_start(); // Start output buffering

    // Include the view file that contains the page's HTML content
    include __DIR__ . '/../themes/apps/research/overview.phtml';

    // Get the content from the buffer and clean it
    $output_page = ob_get_clean();

    // Include the master layout file
    include __DIR__ . '/../themes/components/statics/layout.phtml';
?>

Sources: research/overview.php:1-11, inside/interface.php:1-11

For pages that support multiple languages, the structure is slightly different, involving session management and a translation function.

<?php
// Example: iite/overview.php
session_start();

// Handle language switching via GET parameter
if (isset($_GET['lang'])) {
    $_SESSION['lang'] = $_GET['lang'];
    $cleanUrl = strtok($_SERVER["REQUEST_URI"], '?');
    header("Location: $cleanUrl");
    exit;
}

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

// Translation helper function
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/overview.phtml';
$output_page = ob_get_clean();
include __DIR__ . '/../themes/components/statics/layout.phtml';

Sources: iite/overview.php:1-26, departments/overview.php:1-26

2. Define Page Metadata

Add an entry for the new page in apps/pages.php. This file is a PHP array that maps a page's unique key to its title in various supported languages. The key should match the $page variable defined in the page's PHP file.

Key	Italian	English	French	Spanish
index	Benvenuto in Institute Itech	Welcome to Institute Itech	Bienvenue chez Institute Itech	Bienvenido a Institute Itech
iite_overview	Panoramica di Institute Itech	Overview of Institute Itech	Vue d’ensemble de Institute Itech	Resumen de Institute Itech
iite_company	La nostra società: Institute Itech	Our company: Institute Itech	Notre société : Institute Itech	Nuestra empresa: Institute Itech
departments_overview	I dipartimenti di Institute Itech	The departments of Institute Itech	Les départements de Institute Itech	Los departamentos de Institute Itech

Sources: apps/pages.php:3-32

3. Create the View (.phtml) File

Create the corresponding .phtml file in the themes/apps/ directory (e.g., themes/apps/mynewsection/mypage.phtml). This file should contain only the HTML content specific to the new page. It can use PHP and the t() helper function (if defined in the page's main PHP file) to render dynamic, translated content.

Sources: iite/overview.php:24, research/overview.php:7

4. Add Content Translations

For any text on the new page, add corresponding keys and translations to apps/translations.json. This file holds all UI text strings, organized by a unique key and then by language code (it, en, fr, es).

{
  "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."
  },
  "navbar_primary_iite": {
    "it": "iite",
    "en": "iite",
    "fr": "iite",
    "es": "iite"
  }
}

Sources: apps/translations.json

5. Update Client-Side Navigation (If Applicable)

If the new page needs to be linked from a primary navigation element, you may need to update apps/js/iite_components.js. The script adds event listeners to elements with a data-page attribute and redirects the user to the correct URL.

data-page Attribute	Target URL
iite	http://localhost
insideiite	/inside/overview.php
research	#
departments	/departments/overview.php
news	#
inside	#

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

6. Handle Special Page Styles

The application uses JavaScript to apply specific styles to certain pages.

White Navbar Style

If the new page has a light background and requires the navbar logo to be black instead of white, add its path to the whitePages array in apps/js/iite_components.js.

const whitePages = [
    '/iite/company',
    '/iite/wep',
    '/iite/relationship',
    '/departments/overview',
    '/inside/overview',
    '/inside/ets.php'
];

Sources: apps/js/iite_components.js:26-33

Hidden Navbar

If the new page should not display the main navigation bar (e.g., a login or special utility page), add its path to the hideNavPages array for a client-side fallback. A more robust server-side check is also implemented in files like login.php.

// Server-side check in login.php
$hideNavbarPages = [
    'login',
    'auth',
];
if (in_array($page, $hideNavbarPages, true) || str_contains($_SERVER['REQUEST_URI'], '/login')) {
    $hideNavbar = true;
}

Sources: login.php:23-29, apps/js/iite_components.js:39-44

Summary

Adding a new page is a structured process involving the creation of a PHP controller and a .phtml view. The controller handles logic and includes the view, which is then wrapped by a global layout. All textual content, including page titles and UI elements, must be added to the appropriate translation files (apps/pages.php and apps/translations.json) to support internationalization. Finally, any client-side navigation or special styling requirements must be configured in the main JavaScript file.