Data Flow
Relevant source files
The following files were used as context for generating this wiki page:The data flow within the oldwebsite project is characterized by a server-side PHP rendering engine coupled with client-side JavaScript for user interactions and state management. The core of the content data is managed through a centralized JSON file for internationalization (i18n), which is processed by PHP scripts to generate HTML pages. Client-side scripts handle navigation, cookie consent, and dynamic UI updates by interacting with the DOM and browser storage.
This architecture separates the initial page generation on the server from the dynamic, interactive elements handled by the user's browser. Data primarily flows from PHP configuration and JSON files to HTML templates on the server, and from user actions to JavaScript handlers and localStorage on the client.
Server-Side Data Flow
The server-side architecture is responsible for handling incoming requests, managing session data (like language preference), and rendering the final HTML page. This is accomplished through a set of PHP scripts that act as controllers for different sections of the website.
Sources: iite/overview.php, departments/overview.php, apps/pages.php, research/overview.php
Page Rendering Pipeline
Each top-level PHP file (e.g., iite/overview.php, departments/overview.php) follows a consistent pattern to render a page. The process involves session management, language selection, content retrieval, and template inclusion.
The following diagram illustrates the typical server-side rendering flow for a page request.
Internationalization (i18n) Data
The website's content is almost entirely driven by a single JSON file, which provides translations for multiple languages.
Content Source
The primary source for all display text is apps/translations.json. This file contains a large JSON object where keys represent content elements (e.g., hero_quote, navbar_primary_iite) and values are objects containing the translated strings for different language codes (it, en, fr, es).
Sources: apps/translations.json
Page Titles
Page titles are managed separately in a PHP array returned by apps/pages.php. This file maps page identifiers (e.g., iite_overview) to their translated titles. The PHP page controllers use this array to set the <title> tag for each rendered page.
| Page Key | English Title |
|---|---|
index | Welcome to Institute Itech |
iite_overview | Overview of Institute Itech |
iite_company | Our company: Institute Itech |
iite_relationship | Relationships: Institute Itech |
inside_ets | ETS: Institute Itech |
departments_overview | The departments of Institute Itech |
Sources: apps/pages.php:3-36
Client-Side Data Flow
Client-side logic, managed by apps/js/iite_components.js, enhances the user experience by handling navigation, state persistence via localStorage, and dynamic UI changes.
Sources: apps/js/iite_components.js
Navigation Handling
Client-side navigation is handled by attaching click event listeners to elements with a data-page attribute. When a user clicks one of these elements, the script redirects the browser to a hardcoded URL.
The diagram below shows the client-side navigation flow.
Sources: apps/js/iite_components.js:3-21
Cookie Consent Management
The cookie consent banner's visibility is managed using the browser's localStorage.
- On Page Load: The script checks
localStoragefor an item with the keycookies. - Banner Display: If the value is not
'hidden', the cookie banner is displayed. If it is'hidden', the banner is hidden usingdisplay: 'none'. - User Action: When the user clicks the "accept" or "decline" button, an event listener sets the
localStorageitemcookiesto'hidden'and adds CSS classes to hide the banner with a transition.
This flow ensures that once a user has interacted with the banner, their choice is remembered across sessions.
The following flowchart details this process.
Dynamic UI Components
Tabbed Interface
The interface() function in iite_components.js creates a simple tabbed interface.
- Buttons: Elements with the
[menu-interface]attribute act as tab buttons. - Content Panels: Elements with the
.w-interfaceclass act as content panels. - Logic: Clicking a button removes the
interface-activeandbtn-interface-activeclasses from all tabs and panels, and then adds them only to the clicked button and its corresponding panel based on their index in the DOM.
Sources: apps/js/iite_components.js:139-158, themes/css/design.css:1275-1278
Dynamic Logo Color
The color of the site logo (#iitelogo) is dynamically changed based on the current URL path. An array whitePages contains paths where the logo should be black. The script checks if the current window.location.pathname includes any of these paths and sets the color style property to black or #ffffff accordingly.
Sources: apps/js/iite_components.js:24-36