I'm tasked with building a PHP web application where the content displayed on each page depends on a number of variables & must be re-usable across multiple pages.
A simple example of this is a search page with multiple elements:
- A "basic search" div, displayed to all users.
- An "advanced search" div, displayed to some users.
- A "previous search history" div, displayed to all users, relevant to only their search history. This element should auto-refresh every 60 seconds.
I need each element to be re-usable & have the ability to be refreshed independent of all other elements on the page, thus decoupled from the overall page view.
For example, on a "user_info.php" page, I may want to display the same "previous search history" div. This means I can't build everything into "search.php", otherwise I'd have to build or include "previous search history" twice - once in "search.php" and again in "user_info.php". Since the search history must auto-update, an "include" statement won't work if we use a single page view.
The approach I'm leaning towards is to start by drawing a "search template" containing a bunch of placeholders which will then be populated with HTML via XHR calls.
I'm hoping to get feedback on this approach. Please note that this is a VERY basic example which illustrates how it works. The full implementation will be more complex (ie using proper route mapping, authentication, interval timers for auto div refresh if needed, etc).
If no $_GET variables are set, let's say index.php draws this page template (assuming jQuery & Bootstrap are loaded):
<body>
<div class="row">
<div class="col-md-4 contentPlaceholder" data-route="basicSearch"'></div>
<?php if ($advancedSearchAccess) { ?>
<div class="col-md-4 contentPlaceholder" data-route="advancedSearch"></div>
<?php } ?>
</div>
<div class="row">
<div class="col-md-6 contentPlaceholder" data-route="searchHistory"></div>
</div>
</body>
Then once the page has finished loading, we populate each placeholder:
$(".contentPlaceholder").each(function(e) {
$(this).load("index.php?route=" + $(this).data("route"));
});
The divs will be populated as determined in index.php if $_GET["route"] is set. Example:
switch($_GET["route"]) {
case "basicSearch":
include ("basicSearch.php");
break;
case "advancedSearch":
include ("advancedSearch.php");
break;
case "userSearchHistory":
include ("userSearchHistory.php");
break;
}
Now on any page I can simply include the .contentPlaceholder with the relevant data-route and that element will be displayed wherever I want, with the ability to have it re-loaded without redrawing the entire page.
I'm keen to hear any feedback on this approach; is there a better way to do this? Please keep in mind the client has requested any frameworks (React, Angular, Laravel, etc etc) not be used (Bootstrap + jQuery are allowed, hence used in my example). Also I'm aware of maximum simultaneous XHR requests; this application should have no more than 6 at a time anyway.
