Home > Software design >  HTML <a> link concatenating the 'href' content to existing URL
HTML <a> link concatenating the 'href' content to existing URL

Time:10-30

So far, I've been using GET parameters to route between the pages of my website (hosted on the server of my university). I'd like to make use of $_SERVER["PATH_INFO"] instead as it's, I guess, a cleaner way to route between pages.

I'd like to go from:

www.universitydomain.subdomain/myProject/index.php?action=imageGallery

To:

www.universitydomain.subdomain/myProject/index.php/imageGallery

I have 3 pages:

  1. My main page, index.php
  2. My image gallery page, currently accessible when the GET parameter action equals "imageGallery"
  3. A page to add an image to my gallery, accessible when the GET parameter action equals "addImage"

On each of this page is a menu composed a <a> links:

<a href="index.php" > Main page </a>
<a href="?action=imageGallery" > Gallery </a>
<a href="?action=addImage" > Add image </a>

When doing it this way, everything works fine. So I tried to use a PATH_INFO style URL like so:

<a href="index.php" > Main page </a>
<a href="index.php/imageGallery" > Gallery </a>
<a href="index.php/addImage" > Add image </a>

If I'm on the gallery page, I expect the <a>Main pagey</a> link to write index.php in my URL, which would bring me back to the main page. Yet, this happens :

  • I'm on index.php. The URL is www.universitydomain.subdomain/myProject/index.php
  • I click the second link to get to the gallery. The URL becomes www.universitydomain.subdomain/myProject/index.php/imageGallery
  • I click the first link to get back to the main page. The URL becomes www.universitydomain.subdomain/myProject/index.php/index.php
  • On the third step, If instead of getting back to the main page, I click on the third link to get to the addImage page, the URL becomes www.universitydomain.subdomain/myProject/index.php/index.php/addImage

Why is that ? I haven't been able to reproduce a minimal example of my issue so it seems to be tied to my project (which is a little bit too large to include in this post unfortunately). Even without being able to reproduce this issue, some of you may relate to it and have something to propose.

I have the impression that, after getting to the gallery page (which has the URL /myProject/index.php/imageGallery), the "reference path" of my page has changed to /myProject/index.php/ from /myProject/ and thus, when clicking on the <a href="index.php"> link, it redirects me to /myProject/index.php/index.php instead of /myProject/index.php/

CodePudding user response:

When you migrate (change) the URL-Layout with a single index.php endpoint (sometimes also called a Front Controller) from query-info-part (?action=<page-name>) to path-part (in PHP often with $_SERVER['PATH_INFO']) and you introduce additional path components, you can see this behaviour. It's standard from the URL resolution rules.

query-info               ->  path                      effect

index.php -or- ?, ., ""  ->  index.php                 0 new path components
?action=imageGallery     ->  index.php/imageGallery      1 new path component
?action=addImage         ->  index.php/addImage          1 new path component

In your very specific case to ease the migration, you may want to consider a quick work-around: If no PATH_INFO is given, redirect to the main page that has the same number of path-components as the other two pages.

if (empty($_SERVER['PATH_INFO'])) {
   header('location: index.php/mainPage');
   echo '<!DOCTYPE html><title>moved</title><h1>moved</h1><a href="index.php/mainPage">here</a>.';
   return;
}
<a href="mainPage" > Main page </a>
<a href="imageGallery" > Gallery </a>
<a href="addImage" > Add image </a>

Or similar, replace index.php/mainPage with index.php/ which may have better semantics for your case:

<a href="./" > Main page </a>
<a href="./imageGallery" > Gallery </a>
<a href="./addImage" > Add image </a>

For the last two, the ./ prefix is strictly speaking not necessary, this is equivalent:

<a href="./" > Main page </a>
<a href="imageGallery" > Gallery </a>
<a href="addImage" > Add image </a>

This might give you a better understanding about the consequences of the URL-Layout change while you keep your site working.

For the underlying basic understanding I highly suggest to study the URL resolution specification as this is something very fundamental and will help you to make your own decisions about URL layout changes and how you would like to treat it with your HTML documents as well as with your server-side scripts and overall applications.

  • Related