Architecture Overview
Relevant source files
The following files were used as context for generating this wiki page:The oldwebsite project is a multi-language, server-rendered website built with PHP. It follows a traditional multi-page application (MPA) architecture where each distinct page is served by a corresponding PHP file. The backend logic focuses on session management, internationalization, and a simple templating system. The frontend is enhanced with vanilla JavaScript for user interface interactivity, navigation, and dynamic content manipulation, styled with a comprehensive CSS file that utilizes modern features like CSS variables and Grid/Flexbox layouts.
The architecture is designed around a consistent pattern of request handling and view rendering. A central layout file provides the common HTML structure, while individual PHP files prepare and inject page-specific content. This creates a maintainable structure for adding new pages while keeping shared elements like navigation and footers consistent.
Server-Side Architecture (PHP)
The server-side logic is implemented in PHP and is responsible for handling user requests, managing sessions, processing language preferences, and rendering HTML content. The core of the architecture is a repeatable pattern found in all top-level page files (e.g., index.php, iite/overview.php).
Sources: index.php, iite/overview.php, departments/overview.php, login.php
Request Lifecycle and Page Rendering
Each user-facing page corresponds to a PHP file that acts as a controller. The flow for rendering a page is consistent across the application.
This diagram illustrates the server-side process for rendering a page.
Sources: iite/overview.php:2-23, themes/css/design.css
The key steps are:
- Session Initialization: Every page script starts with
session_start()to manage user-specific data, primarily the selected language. - Language Handling: The script checks for a
langGET parameter. If present, it updates the$_SESSION['lang']variable and reloads the page to apply the change. The active language is determined by$_SESSION['lang'], defaulting to 'it' (Italian). - Translation Loading: The script includes
apps/pages.php, which returns an array of page titles translated into multiple languages. - Content Buffering: The
ob_start()function begins output buffering. The script then includes the page-specific.phtmlview file (e.g.,themes/apps/iite/overview.phtml). All output from this file is captured in a buffer instead of being sent to the browser. - Content Injection:
ob_get_clean()retrieves the buffered content into the$output_pagevariable and ends buffering. - Layout Rendering: Finally, the master template
themes/components/statics/layout.phtmlis included. This file builds the final HTML document, including the<head>, shared navigation, and footer, and echoes the$output_pagevariable to inject the page-specific content.
A typical page controller looks like this:
<?php
session_start();
// Handle language switching
if (isset($_GET['lang'])) {
$_SESSION['lang'] = $_GET['lang'];
$cleanUrl = strtok($_SERVER["REQUEST_URI"], '?');
header("Location: $cleanUrl");
exit;
}
// Set language and page identifier
$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));
}
// Buffer and render the view
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:2-23
Internationalization (i18n)
The application supports multiple languages (Italian, English, French, Spanish) through a two-tiered translation system.
- Page Titles (
apps/pages.php): This file contains a PHP array mapping page identifiers to their translated<title>tags. It is loaded on every request. - UI Content (
apps/translations.json): A comprehensive JSON file holds translations for all other UI text, from navigation links to body content. Keys are semantic (e.g.,hero_quote), and values are objects containing the text for each language. Thet()helper function is used to retrieve the correct string based on the current session language.
The sequence diagram below shows how a user's language choice is processed to render a translated page.
Client-Side Architecture
The frontend relies on vanilla JavaScript for dynamic behavior and a single large CSS file for styling.
JavaScript Components (iite_components.js)
A single JavaScript file, apps/js/iite_components.js, manages all client-side interactivity. It is organized into several distinct functional units that are initialized on page load.
| Function/Component | Description |
|---|---|
| Page Navigation | Attaches click listeners to elements with a data-page attribute to handle client-side page changes via location.href. |
| Dynamic Logo Color | Changes the color of the site logo (#iitelogo) based on the current page's path. A predefined array whitePages lists paths where the logo should be black instead of the default white. |
| Navbar Hiding | Hides the main navigation bar on specific pages (e.g., /login.php) by checking the URL against the hideNavPages array. This acts as a client-side fallback for server-side logic. |
| Cookie Consent | Manages the visibility of a cookie consent banner (#cookies). It uses localStorage to remember if the user has already interacted with the banner. |
| Mobile Menu | The menunavmobile() function controls a hamburger menu for mobile viewports, toggling the visibility and styling of the navigation container. |
| Tabbed Interface | The interface() function implements a simple tab system. It adds event listeners to [menu-interface] buttons to toggle an interface-active class on corresponding content panels. |
Sources: apps/js/iite_components.js:3-138
Styling (design.css)
The visual presentation is controlled by themes/css/design.css. This file defines the entire look and feel of the website.
- CSS Variables: The
:rootselector defines global color and layout variables (e.g.,--static-background,--w-white), allowing for consistent theming. - Layout: The site heavily uses Flexbox (
display: flex) and CSS Grid (display: grid) for structuring page layouts, including complex multi-column arrangements seen on pages likecompanyanddepartments. - Responsive Design:
@mediaqueries are used extensively to adapt the layout for different screen sizes, from mobile phones (320px) to large desktops. This includes collapsing the main navigation into a mobile menu. - Component Styling: The file contains specific styles for all UI components, such as navigation bars, dropdowns, buttons, cards, and backgrounds. Hover effects and transitions are used to provide visual feedback.
- Utility Classes: A utility class,
body.hide-navbar, is defined to completely hide the navigation, which is used on the login page.
Sources: themes/css/design.css:1-1250, login.php:24-27
File and Component Structure
The project's structure separates logic (PHP), views (.phtml), assets (JS, CSS), and configuration (JSON, PHP arrays).
This diagram shows the relationship between the main architectural components.
Summary
The oldwebsite architecture is a straightforward and effective implementation of a server-rendered PHP application. Its strengths lie in its simplicity and the clear, repeatable pattern for creating new pages. The separation of concerns between PHP controllers, PHTML views, and frontend assets is well-defined. The integrated internationalization system is robust, supporting both page titles and granular UI text. Client-side JavaScript progressively enhances the user experience with dynamic features without being a hard dependency for core content rendering.