$baseUrl & $documentUrl

This document outlines the use, determination, and importance of the $baseUrl and $documentUrl variable in a Prisma PHP web application, ensuring resources are correctly linked and accessible.

NOTE: The $baseUrl and $documentUrl variables will not end with a trailing slash /. If you need to add a trailing slash, you can do so by appending it to the variable when using it in your application.

Overview

The $baseUrl variable is relative path and provides a consistent base URL for referencing resources and navigating within the application, crucial for applications hosted in various environments.

The $baseUrl variable is established in the layout file to effectively manage the formation of asset, link, and AJAX call URLs. It is dynamically constructed to incorporate the protocol, domain name, and script path, ensuring accurate resolution of resource paths. The variable is crucial for correct URL formation for assets located in the app/your-assets folder of the application, which can be accessed at https://prismaphp.tsnc.tech/src/app/. The base URL varies between development and production environments; however, the $baseUrl variable consistently ensures that the appropriate resource paths are used across different stages.

The $documentUrl variable is also available to reference the document root directory of the application, which is the root URL of the application. This variable is useful for linking to resources located in the root directory of the application.

By utilizing the $baseUrl and $documentUrl variables, developers can ensure that resources are correctly linked and accessible, enhancing the user experience and application portability.

The main difference between the $baseUrl and $documentUrl variables is that the $baseUrl variable points to the src/app directory of the application, while the $documentUrl variable points to the document root / directory of the application. Both variables are used in the same way to reference resources and construct URLs within the application.

Determination of $baseUrl and $documentUrl

Constructed dynamically based on the protocol, domain name, and script path, $baseUrl and $documentUrl ensures correct resource path resolution.

Usage

Used to prepend to relative URLs for assets, links, and AJAX calls, $baseUrl is instrumental in resource inclusion and navigation.

Importance

It enhances application portability and simplifies development and maintenance by abstracting the root URL.

Conclusion

A critical infrastructure component, $baseUrl ensures a seamless user experience and application portability across different hosting setups.

Example Usage

Below are examples demonstrating how to use $baseUrl in a web application for linking resources and constructing navigation URLs:

Linking to CSS and JavaScript:

<link href="<?= echo $baseUrl; ?>/css/styles.css" rel="stylesheet">
  <link href="<?= echo $documentUrl; ?>/src/app/css/styles.css" rel="stylesheet">
  <script src="<?= echo $baseUrl; ?>/js/index.js"></script>
  <script src="<?= echo $documentUrl; ?>/src/app/js/index.js"></script>

Setting Image Source and Favicon:

<img src="<?= echo $baseUrl; ?>/images/logo.png" alt="Logo">
  <img src="<?= echo $documentUrl; ?>/src/app/images/logo.png" alt="Logo">
  <link rel="icon" href="<?= echo $baseUrl; ?>/favicon.ico" type="image/x-icon">
  <link rel="icon" href="<?= echo $documentUrl; ?>/src/app/favicon.ico" type="image/x-icon">

Creating Navigation Links:

<a href="<?= echo $baseUrl; ?>/about">About Us</a>
  <a href="<?= echo $documentUrl; ?>/src/app/about">About Us</a>

To use the $baseUrl variable in JavaScript, the layout file all ready includes the following script tag:

<script>
    const baseUrl = '<?= echo $baseUrl; ?>';
  </script>