Moving stylesheets to the document head during PHP execution

Moving stylesheets to the document head during PHP execution - php

I'm trying to come up with a system where visual components like foo or faa would be stored in the /components folder, and each component would be in its folder with that components files, say /foo, and the component files foo.component.css and foo.component.php inside it.
The name.component.php has some HTML and a style <link> inside, referring to the name.component.css. which styles that component. Components are included in page files, such as index.php, which gets its <head> tag from head.php, which is outside the root.
The file hierarchy would look like this:
├──* head.php
└──* /root
├──* index.php
└──* /components
├──* /foo
│ ├── foo.component.css
│ └── foo.component.php
└──* /faa
├── faa.component.css
└── faa.component.php
When index.php includes a component, its CSS will be added outside the <head>, which I would like to avoid. Is there a way to move the CSS link to the document <head> during the PHP execution, for example, with a custom function? The CSS needs to be moved from the name.component.php specifically, so manually adding the CSS to the head.php won't do.
File: head.php
<head>
<!-- Other non-component stylesheets here; -->
<!-- Component stylesheets would be moved here during PHP execution; -->
</head>
<body>
File: index.php
require_once("../head.php");
require_once("coponents/foo.component.php");
File: foo.component.php
// Can this be moved to the head during execution from this folder?
echo('<link href="/components/foo/foo.component.css" rel="stylesheet">');
// Some HTML elements here...
// Trigger something here that moves the CSS link to the head.php
Could buffering be an option here? Any pointers would be appreciated.

Should your component really define the css with an echo?
Your index.php could insert it, if you followed a naming convention. The problem you'll see is when you have more complexe things to do...
The way I'd do it is to create some sort of manifest for your component. You'd have a class that would list the required css files, javascript files (why not) and template files. Your index.php could easily run through the definition and include at the proper places.
// File foo.manifest.php
class FooComponent implements Component{
public $stylesheets = ['foo.component.css'];
public $javascripts= ['foo.component.js'];
public $dependsOn = []; // You could set dependencies here so other components are loaded if needed.
public $template = 'foo.component.php';
}
You index would load up the class, and loop through its stylesheets to echo them at the right place.
$components = [new Foo(),new Faa()];
foreach($components as $component){
foreach($component->stylesheet as $stylesheet){
echo ('<link href="'.$stylesheet.'" rel="stylesheet">');
}
}
require_once("../head.php");
foreach($components as $component){
require_once($component->template);
}
You'll have to figure out how to play with the paths tough, either your manifest declares them relative to the index.php or you find a way to know the file from where the manifest class comes from so you can make a relative path from it, unfortunately I'm not very good at PHP for this...

What I am doing in the website I am working on now is to have a single head.php file which I bring into the PHP files for the various pages on my site. Sometimes a particular PHP file for one of the pages may require a different JS file or CSS file. So, I have <?= $headEls ?> inside the head element in head.php.
Now, inside one of the PHP files for the pages I can assign a value to $headEls which is just a string for any script or link elements that may be required.
One problem is that with the above system you have to assign a value to $headEls inside every PHP file (even if you just make it an empty string) or you get an error trying to access an undefined variable. In order to get round that I put the following line inside head.php before trying to access $headEls: The line is $headEls = isset($headEls) ? $headEls : '';. So now I only have to assign a value to $headEls if I actually have a CSS or JS file(s) I want to bring into it.
I am sure that better systems can be thought of but it does work and I do not want to use a framework which solves all these problems plus ones I have never thought about but involves 1000s of files on my server and my local machine.

Related

Relative URL issue

I will have multiple folders/modules to access common files. But accessing them seems to be big deal for me!
I did gone through this link to understand the relative positioning and managed to solve some . But not all. Reference: Relative URL's/paths in php
My folder structure is as below:
Website runs on root folder:
/(index|ajax).php
and then the subfolders:
/css/style.css
/img/*.(jpg|png|gif)
/inc/(header|footer).php
/js/*.js
/registration/(ajax|getsubjects|response|success).php
Now, this is how I included files in the index.php page(this displays correctly, meaning, style,css,js,config all accessible)
<?php
include('inc/header.php');
?>
content here
<?php
include('inc/footer.php');
?>
This index page will have to fetch getsubjects.php, response.php and then finally land in success.php.
The success.php need some styling whereas the previous two were only for processing.
So now in the success.php I access header and footer as below:
include('../inc/header.php');
include('../inc/footer.php');
But this doesn't apply any styling!
inside header.php and footer I include files like this:
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js"></script>
How should I include the files here please?

./css/style.css means from current directory and would achieve the same result as css/style.css. The easiest answer is to determine what the base path of your application is and use that. For instance, if your application is running as http://myapp.com, then you could set all your front-end paths to /css/style.css. If your app runs in a subdirectory, such as http://example.com/myapp, then your paths would be /myapp/css/style.css.
This does not apply the same on the PHP side. For them, you should really use document-relative paths. Having a PHP file that you include in multiple places in your app, the contents of which having something like include('../myDoc.php');, can lead to complications as the path isn't based on the included document's path, but rather the including. So using document-relative paths, you get around this include(__DIR__ . '/../myDoc.php');. Just something to consider if your app grows.

Your PHP-includes seem to be correct. But in your HTML you need to change the linking to the CSS and JS Files (maybe even to your images).
You could use absolute paths:
<link rel="stylesheet" href="/css/style.css">
<script src="/js/script.js"></script>
the leading dot makes your paths relative to the HTML-Document, so if they are linked from a document in a subfolder, they point to a wrong location.

Including files with
<?php
include("page1.php")
?>
put the code (or content) from page1 into the caller page.
So you may have to detect from where your pages are called, or try absolute links (beginning by /)
I hope I answer you question correctly.

Dynamically referencing to header and footer in all PHP pages within different directories and sub-directories

UPDATE 1: to have a clear view of what is happening, you can download a snippet of the script from here.
I am working in a new website that has the same header, footer in all PHP pages.
In the header I am referencing to other common files in website that like .css, .js, functions, classes, db connection, and etc.
for instance, the default.css is in /common/stylesheets/
and my header.php and footer.php are in /common/html/ folder
so my header.php file is something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Header</title>
<link rel="stylesheet" href="common/stylesheets/default.css">
</head>
<body>
In my website index.php I included the header <?php include('common/html/header.php'); ?> and this is working fine... BUT the problems appear when I include the header in other php pages within other directories or sub directories e.g. /pages/admin/dashboard.php, everything messed up and that page no more linked to the default.css file.
So, what I am looking for is a method or logic where I reference to these common files and folders in every PHP page no matter its location; e.g. site root, a directory in the site root, or a sub-directory... etc...
here is an image of my website root
Your help is highly appreciated...
P.S. I've tried to use some superglobals variables such as $_SERVER[''] in config.inc.php file to define the paths, then I included that file in the header.php. BUT I couldn't figure out which one will dynamically keep referencing to those common folders and files no mater where the PHP page is.
UPDATE 1: to have a clear view of what is happening, you can download a snippet of the script from here.

It is usually a good idea to use fully qualified or absolute URLs to reference your assets:
<link rel="stylesheet" href="http://www.sitenamecom/some/path/to/common/stylesheets/default.css">
Since there are many places where you need the proper URL base to reach the different files, you could define a constant having the web root:
define('WEB_ROOT', 'http://www.sitename.com');
Then you could define other constants to have access to the different parts of the system:
define('WEB_ASSETS', WEB_ROOT . '/common');
So for the style sheet link in your header.php it would be:
<link rel="stylesheet" href="<?php echo WEB_ASSETS; ?>/stylesheets/default.css">
To include files the principle is the same only that in this case you don't work with URLs but with file system's paths. There's not really a dynamic way of solving this, it all goes down to absolute paths.
The problem here is that the tree structure in your local development environment might (and surely won't) match that of your server. So in the configuration file, which is located in your application's root you could define:
define('APP_ROOT', dirname(__FILE__));
Then lets use the admin/index.php file as example:
include '../../../config.inc.php';
include APP_ROOT . '/sitename/common/html/header.php';
The tricky part here is including the configuration. Since, until you do that the APP_ROOT won't be available, relative paths are needed to reach it, and it isn't possible to escape this one; unless you can fully trust the preferred absolute form:
include '/some/path/to/config.inc.php';
Having that leading slash, as I said before, will be a problem if the application is tested in different environments because it is rarely the case that some/path/to is always the same.

This is the usual issue with structures that aren't using index.php for centralization. Maybe you can try adding another include that defines your directories as pseudo-constant and prepending them to your asset urls.
Or you can parse the request url on how deep it is and automatically prepend the needed ../ levels to your assets urls. I've done this for one of my past projects.
I got to warn you though, it's better to solve the root of the issue (lack of centralization) than adding workarounds. It will surely come back to haunt you sooner than you think.

$_SERVER['DOCUMENT_ROOT'] is likely what you are looking for.
<?php
require_once($_SERVER['DOCUMENT_ROOT'] . "/sitename/common/html/header.php");
This should work from any directory. If you want it to be a little more dynamic than typing out "sitename", you can do this:
<?php
$sitename = explode("/", $_SERVER['REQUEST_URI']);
require_once($_SERVER['DOCUMENT_ROOT'] . "/" . $sitename[1] . "/common/html/header.php");

You need to Change your <link rel="stylesheet" href="common/stylesheets/default.css"> to <link rel="stylesheet" href="../../common/stylesheets/default.css">

here is a simple modification in php.ini to include footer.php and header.php for each script
auto_append_file=ABSOLUTE_PATH/footer.php
auto_prepend_file=ABSOLUTE_PATH/header.php
restart your Apache if you are running under easyPhp, xampp,....
Warning : This configuration will be applied in all projects that are executed with the modified PHP

Try <link rel="stylesheet" href="/common/stylesheets/default.css">
Note the leading slash... This directs server to the document root.
I tried it and it works.
My tree:
/var/www/html/
subdir/
body.php
layout/
header.php
footer.php
css/
style.css
header.php
<html>
<head>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<p>Header.</p>
<hr>
body.php
<?php
include($_SERVER['DOCUMENT_ROOT'].'/layout/header.php');
echo "Body.<br>";
include($_SERVER['DOCUMENT_ROOT'].'/layout/footer.php');
?>
footer.php
</body>
</html>
style.css
body {
color: red;
}
Viewing http://localhost/subdir/body.php in the browser, I get the expected result: "Header" and "Body" are colored red.

I would store the document root of your website in some define:
define('DOCROOT', $_SERVER['DOCUMENT_ROOT']);
Do this in a PHP file that you include everywhere, preferably in some bootstrap PHP file.
Then you need to prepend your paths with this in your include lines:
<?php include(DOCROOT . "/common/html/header.php"); ?>
Have you also looked at include_once?

Have you tried PHP's set_include_path ?
You can add numerous paths in one set_include_path separating them with a ' :'.
set_include_path('/home/mysite/includes1:/home/mysite/includes2').
PHP.net -> set_include_path

Even without moving to a full front controller (and MVC) setup (which would be good), you are going to save yourself a lot of headaches if you introduce a simple bootstrap-like file.
It's not going to be perfect with your current setup, as your files are including different parts of your system (ie header.php) in various places and sub folders.
Having header load the first output things - i.e. doctype, head and head links etc - is fine in your basic structure, but you have now run into constraints which you cannot work around without making your header.php messy, or including numerous other files before header.php.
In a more solid framework design, the html and doctype outputs are after a lot of other things have been initiated and loaded, to allow control over said html and doctype.
But to help in your case, just load the bootstrap before anything else is loaded/included.
Bootstrap
The bootstrap will load shared resources, and common used data and paths (etc) throughout your application.
You can then add anything else in the bootstrap in the future, if you find a scenario.
A simple example of something in your bootstrap:
bootstrap.php (MUST reside in your root web folder for following constant to work)
// Define root folder
define ('FOLDER_ROOT', __DIR__);
Then throughout your app you can reference that constant (FOLDER_ROOT) to determine the root folder, and work through subfolders as required.
So, using your current setup:
index.php (I presume is in root folder)
include('bootstrap.php');
include(FOLDER_ROOT.'/common/html/header.php');
// Everything else
So then in your bootstrap you can set other things, such as define the default doctype or character encoding, setup error management.
Although you would usually set things like doctype after bootstrap, in a class, the router, some controller, or even a template.
But as you are using common file includes rather than using a more conventional framework design pattern, this way will at least save you some headaches now, and possibly further down the line.
So again in the bootstrap.php:
// Define root folder
define ('FOLDER_ROOT', __DIR__);
// Define CSS folder using root folder constant above
define ('FOLDER_CSS', FOLDER_ROOT.'/common/stylesheets/');
Then in header.php:
echo '<link rel="stylesheet" type="text/css" href="'.FOLDER_CSS.'default.css">';
Sub Folders (ie /admin)
Now in sub folders, such as /pages/admin/dashboard.php etc, you don't have access to these constants, because you are loading your header files and other template like things all separately "across your application".
So it becomes a battle to set your root folder, plus you are now managing it all twice!
You could try loading the root bootstrap file within your admin folder.
So in dashboard.php, something like:
include('/bootstrap.php');
// OR (more likely)
include('../../bootstrap.php');
But this is becoming messy, calling bootstrap in different places, having to call it differently too.
It's not ideal, but it is do-able, in that if you get the bootstrap loaded within your admin area, then you have the root path setup in admin area and so managing other files from your admin files should be easier.
You could try using a new admin specific bootstrap file, eg in /pages/admin/, have adminBootstrap.php.
But then you're setting two different constants for root, and likely more constants to get to your common and css files and folders. It's easy setting your web root path in a file that is in the web root path, and can be tricky (sometimes) setting web root path from another folder.
Stylesheets
You mentioned that using /common/stylesheets/defaults.css (with a preceding slash) doesn't work and causes the source code to show localhost/common/stylesheets/defaults.css.
This would possibly indicate you need to configure your DocumentRoot.
On Linux it's in /etc/apache2/sites-available/, then either the default file, or if you configured your own virtual sites then go into each one.
What is your DocumentRoot set as?
Although if you get the bootstrap working within the admin area this problem might go away, using the constant FOLDER_CSS.
Folder Structure
I also think you should tidy up your folders, as you seem to have separated things into illogical folder names (perhaps logical to you, but will it be when you learn more and come back to it in a year, or another dev tries to use it?).
E.G. I would not know what on earth the folder html is going to contain, as HTML is a protocol, and ultimately your application will serve HTML.
Have a little read into MVC. Don't go into depth as it's a lot of reading/learning, but if you grasp the basics, you can then tidy up your own structure to create your own logical separation of presentation from business a little more logically than it is now.
Front Controller
If instead of using include files, you had a framework, which loads bootstrap and application wide configs, error management, other stuff, then when you come to load your HTML (your header, footer etc), they will have all this application (root folder constants etc) pre-loaded regardless of which sub folder you are trying to load web pages from.
However as you are doing it, you are instead including these things manually whenever you need them in different files, in sub folders.
While you are introducing a small presence of DRY (Don't Repeat Yourself) by having the doctype, head, etc in include files and re-using them, you are still having to repeat yourself with those include files as you re-use them wherever you need them.
Also, what if you wanted to re-style admin differently to the main site? You'd have to include a different header file or a different stylesheet, or just put all code in the same stylesheet.
I'm waffling, but hopefully I'm being clear, and you can see why using header includes is only a small step in the right direction and for small sites. I'm sure you progressed naturally to using those include files from typing out the head/doctype etc in every file.
However now you are trying to break out into other directions, as with your admin area, you can see the constraints and including those same files is becoming harder to manage as your entire application grows.
So if you had a front controller type setup, within your dashboard.php you would have been able to simply used the constants set in the root bootstrap file, and any other sub folder which would be accessed after the core application is loaded.
EG (if using front controller like pattern)
dashboard.php:
include(FOLDER_ROOT.'/common/html/header.php');
I know I've bashed on about front controller already, but a few years back I was at the stage you are now, and moved from having all my files including the header.php, then the page content, then including footer.php, etc, and I instead started using a front controller.
It's really sooo much better!
It is a fair learning curve (with learning curves in all sorts of directions and methods, requirements, etc) and as such will leave it up to you if you want to go further into that.
I now have my own basic MVC front controller system, which I just simply plonk a new file for a new website page into the view/pages folder, and the page can be used immediately in the browser (the system does everything else).

PHP DIR or SCRIPT_ROOT confusion

I'm working ona site and It's becoming more complex with folder structure. I'm sure this is a simple problem for most but I keep getting mixed results.
my folder structure is something like:
Root:
assets
css
js
images
core
init.php
categories
sub category
file.php
includes
header.php
footer.php
and so on.
the init file will be included at the top of every document, excluding the header and footer.
the header and footer are included in every page.
I'd like to achieve something where instead of writing include '../../includes/footer.php' or include '../includes/footer.php' I can just write include '$root. /includes/footer.php' and not need to worry about the links.
The same applies for my nav bar (which is located in the header) if i want to go to index and i'm in a sub folder then it tries to take me to site/subFolder/index.php which doesn't exist. I'd like to use the same idea her and have the nav links as root. file location
Could someone please help? It's killing me and I'm certain it's so simple I'm looking past the obvious.
I've outputted DIR and SERVER_ROOT
I can hash something together using
$bla = $_SERVER['DOCUMENT_ROOT'];//= c:/www
$bla.= "/nameOfMyRootFolder";
but wondering what the best way is as i keep seeing references to DIR
thanks!

$_SERVER['DOCUMENT_ROOT'] is defined in the webserver config and generally doesn't change.
__DIR__ is the directory that the file it is used in resides.
eg: in docroot/includes/header.php __DIR__ == 'docroot/includes' and $_SERVER['DOCUMENT_ROOT'] == 'docroot'
Documentation

PHP Include links

Hello I'm having my first serious go with PHP to create a sample script for my self. It has a basic structure, in my root folder I have:
index.php
core folder (holds most of my php function files)
includes (holders my header.php and footer.php)
sites - (sites has 3 further folders site A, B, C)
CSS
js
All pages are made up by taking a header.php and footer.php from the includes folder and then each page has its own content in the middle. The header.php contains (as well as basic html and links to javascripts stylesheets ect) includes from core folder like so:
include_once '/core/connect.php';
Now these all work great using the index.php which provides links to the 3 different sections of the site, sitea, siteb and sitec.
But when you navigate out of the document root to say /sites/sitea/index.php all those links are now broken.
What is the best way to go about building the links in the header.php section so they are relative site wide no matter which folder you are in?

The idea behind this is that you do only have ONE file for each process.
So process all pages through index.php
index.php would contain, for example,
require('header.php');
include('content.php');
require('footer.php');
That way, it won't break the site if your content doesn't show.
Your index is always loaded from the same path, so header/footer wouldn't change. Just content.

When you're including you want to use a real path, not a relative path...
require_once ($_SERVER['DOCUMENT_ROOT'].'/includes/header.php');
/* something happens here */
require_once ($_SERVER['DOCUMENT_ROOT'].'/includes/footer.php');

The best way is to always use physical path from wherever you are - this way every page that include other page with includes won't get break:
PHP 5.2 and down:
require(dirname(__FILE__) . '/core/connect.php');
PHP 5.3 and above
require(__DIR__ . '/core/connect.php');

How to automatically include/load css and js from modules in CodeIgniter using HMVC

I have some modules in modules folder that have css and js folder and I am thinking of the way how to approach the automatic load of all this css and js files to my header of the template.
I was thinking of creating 2 modules called cssloader and jsloader that will be included in the header section of the template.
They would contain some php script that will put the urls of css (and js) in an array and this array will be outputed in the template like e.g.:
<?php echo Modules::run( 'cssloader/cssloader/_css_include_for_frontend' ); ?>
The urls will be grabed by some script that will be searching modules folder of the CI application and looking for css folder within and a file load_css.php with some defined constants or variables like
$css_loader_frontend['slider'] = array('slider.css',
'slider_ie6.css'
);
$css_loader_backend['slider'] = array('slider_admin.css');
This file will contain files that will be loaded e.g. slider.css (within slider module css folder)
And the similar scenario for javascript stuff.
Is my approach right or not and you would do it somehow different?
What do you think about it?
What would you do different and more effective?
Thanks

I Think this template class can help you, though, I was wondering why are you accessing assets files inside modules, I'm not well versed but as far as I know you should access files such as img, js, css and so on just on the level of system and application folders in a folder that could be named "public" or "assets" to avoid "Directory access is forbidden."

We Keep Coding

PHP, A popular general-purpose scripting language that is especially suited to web development.