GoBrik Page Template
Our GoBrik content pages follow a structure developed on our Ecobricks.org site. On both sites we use php to load common page components to create the page and allow for customization. The core customization of the page occurs of course on its main php page. That's where the page's content goes.
Take for example our Login.php page: https://github.com/gea-ecobricks/gobrik-3.0/blob/main/en/login.php
Let's go step by step through the page layout:
This loads all the generic functions for our pages. In particular login and session functions that set the value of is_logged_in. Error reporting can also be turned off and on this page for the entire app (i.e. for beta vs live).
require_once '../earthenAuth_helper.php';
$lang = basename(dirname($_SERVER['SCRIPT_NAME'])); $version = '0.773'; $page = 'login'; $lastModified = date("Y-m-d\TH:i:s\Z", filemtime(FILE));
This sets up the page variable so that we can load the relevants include and meta pages. The variable also freshens the css and js files for the page.
// Check if user is logged in and session active if ($is_logged_in) { $buwana_id = $_SESSION['buwana_id'] ?? ''; // Retrieve buwana_id from session
These variables are set for use later in the layout of the page:
// Fetch the user's location data
$user_continent_icon = getUserContinent($buwana_conn, $buwana_id);
$user_location_watershed = getWatershedName($buwana_conn, $buwana_id);
$user_location_full = getUserFullLocation($buwana_conn, $buwana_id);
$gea_status = getGEA_status($buwana_id);
$user_community_name = getCommunityName($buwana_conn, $buwana_id);
$first_name = getFirstName($buwana_conn, $buwana_id);
} else { // Redirect to login page with the redirect parameter set to the current page echo '<script> alert("Please login before viewing this page."); window.location.href = "login.php?redirect=' . urlencode($page) . '"; </script>'; exit(); }
<?php require_once ("../includes/login-inc.php");?>
Alot happens in this include! But basically this sets up the top of the page. Any CSS that is unique to this page (i.e. is not in the site stylesheets) is listed here. We also include preload image links and CSS that we want to be sure loads extra fast.
This file contains the link to ../header-2024.php This is the same header used by all the other pages to show the top menu, the intro show, the modal-dialogues, the main-menu, etc. More on the header in another page!
<div class="splash-content-block"></div>
<div id="splash-bar"></div>
<div id="form-submission-box" style="height:100vh;">
Now the page's html starts. But wait! Its important to note that in fact the div '#page-content' is already open! It was open inside the header. This is to enable us to add the modal tag to it and capture various html components in the header (i.e. blur them and the whole page content out except for the modal, slideshow, menu, etc.).
Notice how the form-submission box has a height of 100vh. For certain pages that have limited content and need high bang for their landing buck... this ensures the content of the page (like in this case the login box) is fully presented to the user in one view.
<?php require_once ("../footer-2024.php");?>
This loads our footer in its full glory! No need to worry about any of the many details of this complicated html component. This include does it all.
<script src="../translations/core-en.js?v=<?php echo ($version); ;?>"></script>
<script src="../translations/core-fr.js?v=<?php echo ($version); ;?>"></script>
<script src="../translations/core-id.js?v=<?php echo ($version); ;?>"></script>
<script src="../translations/core-es.js?v=<?php echo ($version); ;?>"></script>
<script src="../translations/<?php echo ($page); ;?>-en.js?v=<?php echo ($version); ;?>"></script>
<script src="../translations/<?php echo ($page); ;?>-fr.js?v=<?php echo ($version); ;?>"></script>
<script src="../translations/<?php echo ($page); ;?>-id.js?v=<?php echo ($version); ;?>"></script>
<script src="../translations/<?php echo ($page); ;?>-es.js?v=<?php echo ($version); ;?>"></script>
This is important. The footer contains the links that load the lists of data-land-id snippets for the page. Depending on the language that the user has chosen, the user is in that language directory (i.e. en/login.php). And that directory is used to set the languagSwitcher function (declared in the header.php) that then sets the language of the page by using one of the files above.
Its usually best to put scripts at the bottom of the page so that the full page has loaded by the time they are activated and used. This is the spot for that.
<script type="text/javascript">
function showModalInfo(type) {
const modal = document.getElementById('form-modal-message');
const photobox = document.getElementById('modal-photo-box');
const messageContainer = modal.querySelector('.modal-message');
const modalBox = document.getElementById('modal-content-box');
let content = '';
photobox.style.display = 'none';
switch (type) {
case 'reset':
content = `` 
``;
break;
default:
content = '<p>Invalid term selected.</p>';
}
messageContainer.innerHTML = content;
`// Show the modal and update other page elements`
`modal.style.display = 'flex';`
`document.getElementById('page-content').classList.add('blurred');`
`document.getElementById('footer-full').classList.add('blurred');`
`document.body.classList.add('modal-open');`
}
// Check if there's an error message and show the error div if needed
document.addEventListener("DOMContentLoaded", function() {
const errorType = "<?php echo isset($_GET['error']) ? htmlspecialchars($_GET['error']) : ''; ?>";
if (errorType === "wrong_password") {
validatePassword(false);
}
});
</script>
This script can be customized for any modals that are unique to the page. Notice how it adds classes to the page-content to blur it out. This is why the page-content div needed to be high up in the header (but below the modal-content div to not include it).