Getting Started
Relevant source files
The following files were used as context for generating this wiki page:This document provides a high-level overview of the oldwebsite project, a multi-page PHP application. It covers the core architecture, including page rendering, internationalization (i18n), client-side scripting, and styling. The goal is to provide a starting point for developers new to the codebase.
The application is built with PHP for server-side logic and uses a simple templating system where individual page content (.phtml files) is injected into a master layout file. It supports multiple languages (Italian, English, French, Spanish) through session-based language selection and JSON/PHP translation files. Client-side interactivity is managed by a single JavaScript file, iite_components.js, which handles navigation, UI components, and cookie management.
Core Architecture
The project follows a straightforward structure where top-level PHP files act as controllers for different sections of the website. These controllers handle language settings, define page titles, and include the appropriate view templates.
Page Rendering Flow
Each page request is handled by a specific PHP file (e.g., index.php, iite/overview.php). The rendering process is consistent across the application and follows these steps:
- Start a PHP session.
- Check for a
langGET parameter to switch the site's language and store it in$_SESSION['lang']. - Load translation data from
apps/pages.php. - Set the page-specific
$titleusing the translation data. - Use output buffering (
ob_start()) to capture the HTML generated by a page-specific.phtmltemplate file. - Include the main layout file,
themes/components/statics/layout.phtml, which then renders the final page using the captured content and other variables.
This diagram illustrates the server-side rendering flow for a typical page.
Sources: iite/overview.php, index.php, login.php
Directory Structure
The repository is organized by feature and file type.
| Directory/File | Description |
|---|---|
index.php | The main entry point for the homepage. |
login.php | Entry point for the login page, demonstrates conditional navbar hiding. |
/iite/, /inside/, etc. | Directories containing controller-like PHP files for different website sections. |
apps/ | Contains application logic and data, including JavaScript (js/), page metadata (pages.php), and translation strings (translations.json). |
themes/ | Contains all presentation files, including CSS (css/), assets (assets/), and PHTML templates (apps/, components/). |
Sources: index.php, iite/overview.php, apps/js/iite_components.js, themes/css/design.css
Internationalization (i18n)
The website supports four languages: Italian (it), English (en), French (fr), and Spanish (es). The language is determined by the $_SESSION['lang'] variable, which defaults to 'it'.
Language Switching
A user can switch the language by providing a lang query parameter in the URL (e.g., ?lang=en). The server-side script will update the session variable and then redirect the user to the same URL without the query parameter to provide a clean URL.
Sources: index.php:4-8, iite/overview.php:4-9
Translation Sources
Translations are stored in two main locations:
apps/pages.php: An associative array mapping page identifiers to their translated titles. This is used to set the<title>tag of each page.apps/translations.json: A JSON file containing key-value pairs for all other text strings used throughout the site, such as navigation labels, quotes, and button text.
A helper function t($key) is defined in each main PHP file to retrieve the correct translation string for the current language.
Sources: apps/pages.php, apps/translations.json, index.php:15-18
Client-Side Functionality
All major client-side interactions are handled by apps/js/iite_components.js.
Navigation
The script adds event listeners to elements with a data-page attribute to handle client-side routing via location.href.
data-page value | Destination URL |
|---|---|
iite | http://localhost |
insideiite | /inside/overview.php |
research | # (No-op) |
departments | /departments/overview.php |
news | # (No-op) |
inside | # (No-op) |
Sources: apps/js/iite_components.js:5-21
Dynamic UI Changes
The script performs several UI modifications based on the current page's path:
- Logo Color: The color of the IITE logo (
#iitelogo) is changed toblackon specific pages (e.g.,/iite/wep,/inside/overview) and is#ffffff(white) on others. - Navbar Visibility: The navbar is hidden on the login page (
/login.php). This is handled both on the server-side (login.php) and reinforced on the client-side as a fallback to prevent a flash of content.
Sources: apps/js/iite_components.js:24-48, login.php:24-28
Cookie Consent
A cookie consent banner is managed using localStorage. When a user accepts or declines, an item 'cookies' is set to 'hidden' in localStorage, and the banner is hidden. On subsequent page loads, the script checks for this value and keeps the banner hidden if it exists.
This diagram shows the logic for the cookie consent banner.
Sources: apps/js/iite_components.js:51-83
Other Components
- Mobile Menu: The
menunavmobile()function toggles the visibility and icon state of the mobile navigation menu. - Tabbed Interface: The
interface()function manages a simple tab system where clicking a[menu-interface]button shows the corresponding.w-interfacecontent panel.
Sources: apps/js/iite_components.js:85-121, apps/js/iite_components.js:123-143
Styling
The primary stylesheet is themes/css/design.css. It defines the overall look and feel of the website, including layout, typography, and color schemes.
CSS Variables
The project makes extensive use of CSS variables (custom properties) for theming and consistency. This allows for easy changes to core colors and layout properties.
| Variable | Default Value | Purpose |
|---|---|---|
--static-background | #BFBFBF | A static background color. |
--navbar-background | #02274c | Background color for the navigation bar. |
--w-white | white | Primary white color. |
--w-black | black | Primary black color. |
--w-blue | #0448d5 | Accent blue color. |
--w-orange | #fc6d49 | Accent orange color. |
Sources: themes/css/design.css:3-17
Responsive Design
The stylesheet includes multiple @media queries to adapt the layout for different screen sizes, ranging from mobile devices (320px) up to large desktops. This includes adjustments for navigation (switching to a mobile menu), grid layouts, and font sizes.
Sources: themes/css/design.css:1053-1322