WEP Module
Relevant source files
The following files were used as context for generating this wiki page:The WEP (WEP2025 Projects) module is a static content page responsible for showcasing specific projects undertaken by the Institute. The page is built using a standard PHP backend for rendering and internationalization, with a CSS Grid-based layout for visual presentation. The primary entry point for this module is /iite/wep.php.
The module displays several project cards, including "Memoria™ 2025", "Oxyleaf", and "Terra", each with distinct styling and background imagery. It is integrated into the main site's navigation and shares common frontend components and logic.
Architecture and Rendering Flow
The WEP page is rendered through a server-side PHP script. The process involves session management, language detection, content fetching, and template inclusion.
Sources: iite/wep.php, apps/pages.php, index.php
Page Request Lifecycle
The following diagram illustrates the sequence of events when a user requests the /iite/wep.php page.
This diagram shows the two-step process for language setting via a redirect, followed by the main rendering flow that assembles the page content within a master layout.
Sources: iite/wep.php:2-21, index.php:2-19
PHP Controller Logic
The core logic resides in iite/wep.php.
// iite/wep.php
<?php
session_start();
// Handles language switching via GET parameter and redirect
if (isset($_GET['lang'])) {
$_SESSION['lang'] = $_GET['lang'];
$cleanUrl = strtok($_SERVER["REQUEST_URI"], '?');
header("Location: $cleanUrl");
exit;
}
// Sets language and page identifier
$lang = $_SESSION['lang'] ?? 'it';
$page = $_GET['page'] ?? 'iite_wep';
$translations = require __DIR__ . '/../apps/pages.php';
// Sets the page title. Note: 'iite_wep' is not in apps/pages.php, so it defaults.
$title = $translations[$page][$lang] ?? $translations[$page]['en'] ?? 'Institute Itech';
// Defines the 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));
}
// Buffers the view template and injects it into the main layout
ob_start();
include __DIR__ . '/../themes/apps/iite/wep.phtml';
$output_page = ob_get_clean();
include __DIR__ . '/../themes/components/statics/layout.phtml';
Sources: iite/wep.php:1-22, apps/pages.php
Content and Internationalization
Content for the WEP module is managed through JSON and PHP files, allowing for multi-language support.
Translation Keys
The main navigation link and project titles are defined in apps/translations.json.
| Key | English Value | Purpose |
|---|---|---|
navbar_secondary_iite_wep_projects | WEP2025 Projects | Text for the main navigation menu item. |
iite-wep-memoria | Memoria™ 2025 | Title for the "Memoria" project card. |
Sources: apps/translations.json:100-103, apps/translations.json:800-804
Frontend Layout and Styling
The visual presentation of the WEP page is controlled by themes/css/design.css. It uses a CSS Grid system to arrange project cards.
Sources: themes/css/design.css
Grid Structure
The WEP page utilizes a 9-column, 9-row grid named grid-inside-wep to position its elements. The project cards are placed within this grid.
The following diagram shows the layout of the project cards within the grid.
Project Card Styling
Each project has a dedicated CSS class that defines its appearance, primarily its background image and border.
| Class | Grid Area | Background Image | Top Border |
|---|---|---|---|
.iite-wep-memoria | grid-column: 1 / 4; grid-row: 2 / 8; | 9GoOkNAEcCQ.jpg | 5px solid var(--w-midnight) |
.iite-wep-oxyleaf | grid-column: 4 / 7; grid-row: 2 / 8; | 25626525.jpg | 5px solid var(--w-midnight) |
.iite-wep-terra | grid-column: 7 / 11; grid-row: 2 / 8; | PqnFa01JoRg.jpg | 5px solid var(--w-midnight) |
Sources: themes/css/design.css:691-700, themes/css/design.css:702-711, themes/css/design.css:713-722
Client-Side Behavior
A small piece of client-side JavaScript in apps/js/iite_components.js targets the WEP page. It ensures that the site logo's color is set to black for better visibility against the page's white background.
// apps/js/iite_components.js
// White Navbar IITELOGO change
const logo = document.getElementById('iitelogo');
const path = window.location.pathname;
const whitePages = [
'/iite/company',
'/iite/wep', // WEP page is included here
'/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';
}
Sources: apps/js/iite_components.js:25-40