Skip to content

Template Asset, Relative, Base and Canonical Links

Jump to bottom
Jorge Castro edited this page Sep 25, 2020 · 3 revisions

Content

Different kinds of URL

Name Description Methods Tag Example
Base URL The base of the project setBaseUrl,GetBaseUrl @base,@asset,@relative http://www.domain.dom/erp
Current URL The full current URL of our web. setCurrentUrl,getCurrentUrl, getCurrentUrlCalculated http://www.domain.dom/erp/Product/20?filter=40
or
http://www.domain.dom/erp/Product/Volt20?filter=40&param=555
Canonical URL The canonical URL of the webpage setCanonicalUrl,getCanonicalUrl @canonical http://www.domain.dom/erp/Product/Volt20

Asset Links

The next libraries are designed to work with assets (CSS, JavaScript, images, and so on). While it's possible to show an asset without a special library but it's a challenge if you want to work with a relative path using an MVC route.

For example, let's say the next example: http://localhost/img/resource.jpg

you could use the full path.

<img src='http://localhost/img/resource.jpg' />

However, it will fail if the server changes (in this case, it points to localhost instead of the real server). So, you could use a relative path.

<img src='img/resource.jpg' />

However, it fails if you are calling the web using this direcction http://localhost/controller/action/

It is because the browser will try to find the image at http://localhost/controller/action/img/resource.jpg instead of http://localhost/img/resource.jpg

So, the solution is to set a base URL and to use an absolute or relative path

Absolute using @asset

<img src='@asset("img/resource.jpg")' />

is converted to

<img src='http://localhost/img/resource.jpg' />

Relative using @relative

<img src='@relative("img/resource.jpg")' />

is converted to (it depends on the current url)

<img src='../../img/resource.jpg' />

It is even possible to add an alias to resources. It is useful for switching from local to CDN.

$blade->addAssetDict('js/jquery.min.js','https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js');

so then

@asset('js/jquery.min.js')

returns

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

📁 Example: BladeOne/examples/relative1/relative2/callrelative.php

@asset

It returns an absolute path of the resource.

@asset('js/jquery.js')

Note: it requires to set the base address as

$obj=new BladeOne();
$obj->setBaseUrl("https://www.example.com/urlbase/"); // with or without trail slash

Security: Don't use the variables $SERVER['HTTP_HOST'] or $SERVER['SERVER_NAME'] unless the url is protected or the address is sanitized.

@relative

It's similar to @asset. However, it uses a relative path.

@relative('js/jquery.js')

Note: it requires to set the base address as

$obj=new BladeOne();
$obj->setBaseUrl("https://www.example.com/urlbase/"); // with or without trail slash

@base

Another alternative to working with relative path is to use the HTML "base" tag. This BladeOne Tag (@base) displays the HTML "base" tag using the current base URL.

In our code

$obj->setBaseUrl("https://www.example.com/urlbase");

And in our template

<head>
@base
</head>
<body>
<img src='img/resource.jpg' /> <!-- equivalent to https://www.example.com/urlbase/img/resources.jpg -->
</body>

Canonical URL

Sometimes we have two different URLs for the same page. Example domain.dom/product/red and domain.dom/product/25.

For SEO purposes, the system could punish one of those pages or both (because it contains duplicated information).

To avoid it, we could set a canonical URL as follow.

In our code.

$blade->setCanonicalUrl("https://www.example.com/product/red");

And in our template (usually inside the head of the html)

<head>
@canonical
</head>

If we try to use the tag @canonical without set the value, then it uses the current URL. If we are not set the current URL, then it tries to calculate the current URL by information obtained by the user.

Methods

setBaseUrl($url)

It sets the base URL and it also calculates the relative path.
The base URL defines the "root" of the project, not always the level of the domain but it could be any folder.
This value is used to calculate the relativity of the resources but it is also used to set the domain.
Note: The trailing slash is removed automatically if it's present.
Note: We should not use arguments or name of the script.
Examples:

$this->setBaseUrl('http://domain.dom/myblog');
$this->setBaseUrl('http://domain.dom/corporate/erp');
$this->setBaseUrl('http://domain.dom/blog.php?args=20'); // avoid this one.
$this->setBaseUrl('http://another.dom');

getRelativePath()

It returns the relative path to the base url or empty if not set
Example:

// current url='http://domain.dom/page/subpage/web.php?aaa=2
$this->setBaseUrl('http://domain.dom/');
$this->getRelativePath(); // '../../'
$this->setBaseUrl('http://domain.dom/');
$this->getRelativePath(); // '../../'

Note:The relative path is calculated when we set the base url.

getCurrentUrlCalculated()

It gets the full current URL calculated with the information sends by the user.
Note: If we set baseurl, then it always uses the baseurl as domain (it's safe).
Note: This information could be forged/faked by the end-user.
Note: It returns empty '' if it is called in a command line interface / non-web.
Note: It doesn't returns the user and password.

getCanonicalUrl()

It gets the full current canonical url.
Example: $this-getCanonicalUrl(); // get https://www.mysite.com/aaa/bb/php.php?aa=bb

  • It returns the $this->canonicalUrl value if is not null
  • Otherwise, it returns the $this->currentUrl if not null
  • Otherwise, the url is calculated with the information sends by the user

setCanonicalUrl($url)

It sets the full canonical url.
Example: $this->setCanonicalUrl('https://www.mysite.com/aaa/bb/php.php?aa=bb');

getCurrentUrl()

It gets the full current url
Example: $this-getCurrentUrl(); // get https://www.mysite.com/aaa/bb/php.php?aa=bb

  • It returns the $this->currentUrl if not null
  • Otherwise, the url is calculated with the information sends by the user

setCurrentUrl($url)

It sets the full current url.
Example: $this->setCurrentUrl('https://www.mysite.com/aaa/bb/php.php?aa=bb'); Note: If the current URL is not set, then the system could calculate the current URL.

Copyright Jorge Castro Castillo

Clone this wiki locally