Internal Portal ("Inside")

Relevant source files

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

• inside/overview.php
• inside/interface.php
• inside/ets.php
• apps/js/iite_components.js
• apps/pages.php
• apps/translations.json
• themes/css/design.css
• login.php

The "Inside" portal is a dedicated section within the Institute Itech website, accessible via the main navigation. It appears to host content distinct from the public-facing "iite," "research," and "departments" sections. The portal includes pages such as a general overview, an "ETS" section, and a dynamic tabbed interface page.

The portal's architecture follows the site-wide pattern of using PHP controllers to manage session, language, and page titles before rendering content through a shared layout and specific .phtml templates. Client-side interactivity, particularly for navigation and the tabbed interface, is handled by a global JavaScript file.

Architecture and Page Rendering

All pages within the /inside/ directory share a common server-side rendering flow. A PHP script acts as a controller to set up the environment, which then includes template files for the final HTML output.

Sources: inside/overview.php, inside/ets.php, inside/interface.php

Page Request Flow

The diagram below illustrates the server-side process for rendering an "Inside" page, such as /inside/ets.php.

Navigation

The "Inside" portal is integrated into the website's main navigation system, with both server-side text definitions and client-side routing logic.

Navigation Structure

The primary navigation link for the portal is defined in apps/translations.json. This file also contains definitions for numerous sub-pages within the "Inside" section.

Key	English Text	Purpose
navbar_primary_inside	inside institute itech	Main navigation link for the portal.
navbar_secondary_inside_ets_overview	ETS Overview	Link to the ETS page.
navbar_secondary_inside_programma_educazione	Education Program	Link to a sub-page.
navbar_secondary_inside_programma_tecnologica	Technology Program	Link to a sub-page.
navbar_secondary_inside_programma_sociale	Social Program	Link to a sub-page.

Sources: apps/translations.json:143-178

Client-Side Routing

Client-side JavaScript handles the redirection when a user clicks a navigation link. An element with the attribute data-page="insideiite" will trigger a redirect to the portal's main overview page.

// apps/js/iite_components.js:5-10
page.addEventListener('click', () => {
    // ...
    if (page.dataset.page === 'insideiite') {
        location.href = "/inside/overview.php";
    }
    // ...
});

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

Key Pages and Features

The "Inside" portal contains several key pages, each serving a specific function.

File	Page Key	Purpose
inside/overview.php	inside_ets (default)	The main landing page for the portal. Curiously, it defaults to the inside_ets page key.
inside/ets.php	inside_ets	A specific page titled "ETS".
inside/interface.php	N/A	A page that showcases a dynamic, client-side tabbed interface.

Sources: inside/overview.php:12, inside/ets.php:12, inside/interface.php

Tabbed Interface Component

The inside/interface.php page provides a user interface with selectable tabs that reveal different content panes. This functionality is driven by a combination of HTML structure, CSS, and JavaScript.

Sources: inside/interface.php, apps/js/iite_components.js:130-149, themes/css/design.css:1038-1149

Component Logic

The interface works by assigning event listeners to button elements and toggling CSS classes on both the buttons and their corresponding content panes.

1. HTML: Buttons are marked with a menu-interface attribute. Content panes have a .w-interface class.
2. JavaScript: The interface() function in iite_components.js listens for clicks on [menu-interface] buttons.
3. CSS: By default, .w-interface panes are hidden (display: none). When a button is clicked, the JavaScript adds an .interface-active class to the corresponding pane, which sets its display to block. It also adds a .btn-interface-active class to the clicked button for styling.

Interaction Flow

The following sequence diagram shows the user interaction with the tabbed interface.

Associated CSS Classes

The appearance and behavior of the tabbed interface are controlled by these CSS classes.

Class	Element	Purpose
.background-userinterface	Main container	Defines the layout for the interface page.
.btn-interface	Tab button	Base styling for a tab button.
.btn-interface-active	Active tab button	Styling for the currently selected tab (e.g., different background, border).
.w-interface	Content pane	Base styling for a content pane, including display: none.
.interface-active	Active content pane	Overrides the display property to display: block, making the pane visible.

Sources: themes/css/design.css:1038-1149