lets assume that I want to organize my pages as following:
<?php include('header.inc.php'); ?>
my-page-content
<?php include('footer.inc.php'); ?>
in the header we have .css files and in the footer we have .js files.
how do I do if I want to load only the CSS and JS that the current page needs?
for example, on the article page I don't need to load the JS resources that manage maps and calendar.
Personally, I think it is useless to insert other files into html that will never be used - for cache management purposes. The smaller the html cache space used, the more efficient and powerful the html page will be.
Consider the following example:
file: library.php
<?php
function includeFiles(string $typeFile, array $source_arr, array $request_file): array
{
$tmp = [];
$element = $typeFile === "css" ? "<link rel=\"stylesheet\" href=\"%s\">" : "<script src=\"%s\"><script>";
foreach ($request_file as $file) {
if (array_key_exists($file, $source_arr)) {
array_push($tmp, [sprintf($element, "https://example.com" .$css[$file])]);
}
}
return count($tmp) > 0 ? $tmp : false;
}
// Make a list of all .js and .css files using the php array:
$css = [
// List all the .css files you are using here
"css1" => "/css/css1.css",
"css2" => "/css/css2.css",
"css3" => "/css/css3.css",
"css4" => "/css/css4.css",
"css5" => "/css/css5.css"
];
$js = [
// List all the .js files you are using here
"js1" => "/js/js1.js",
"js2" => "/js/js2.js",
"js3" => "/js/js3.js",
"js4" => "/js/js4.js"
];
?>
file: main_html.php
<?php
include "library.php";
$css_files = ["css1", "css3", "css5"];
$headers = implode(PHP_EOL, includeFiles("css", $css, $css_files));
$js_files = ["js1", "js3", "js5"];
$footer = implode(PHP_EOL, includeFiles("js", $js, $js_files));
?>
<!-- Here html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<?php echo $headers; ?>
<!-- and other your required head element parameters -->
</head>
<body>
<!-- includes .js files -->
<?php echo $footer; ?>
</body>
</html>
Related
I'm creating a web app where I want to include JavaScript files with all file sources in an array, but I can't do that.
Header.php
<head>
<?php
$import_scripts = array(
'file01.js',
'file02.js'
);
foreach ($import_scripts as $script) {
echo '<script src="' . $script . '"></script>';
}
?>
</head>
<body>
Index.php
<?php
include('header.php');
array_push($import_scripts,'file03.js')
?>
But this only includes file01.js and file02.js, JavaScript files.
Your issue is that you've already echo'ed the scripts in headers.php by the time you push the new value into the array in index.php. So you need to add to extra scripts before you include headers.php. Here's one way to do it (using the null coalescing operator to prevent errors when $extra_scripts is not set):
header.php
<?php
$import_scripts = array_merge(array(
'file01.js',
'file02.js'
), $extra_scripts ?? []);
?>
<!DOCTYPE html>
<html>
<head>
<!-- Scripts Section -->
<?php
foreach ($import_scripts as $script) {
echo '<script src="' . $script . '"></script>' . PHP_EOL;
}
?><title>Demo</title>
</head>
<body>
<p>Blog</p>
index.php
<?php
$extra_scripts = ['file03.js'];
include 'header.php';
?>
Output (demo on 3v4l.org)
<!DOCTYPE html>
<html>
<head>
<!-- Scripts Section -->
<script src="file01.js"></script>
<script src="file02.js"></script>
<script src="file03.js"></script>
<title>Demo</title>
</head>
<body>
<p>Blog</p>
header.php
<?php
function scripts()
{
return [
'file01.js',
'file02.js'
];
}
function render($scripts)
{
foreach ($scripts as $script) {
echo '<script src="' . $script . '"></script>';
}
}
?>
<head>
index.php:
<?php
include 'header.php';
$extra_scripts = scripts();
$extra_scripts[] = 'script3.js';
render($extra_scripts);
?>
</head>
<body>
PHP is processed top down so it will currently be adding file03.js to the array after the foreach has been run.
This means you have two options:
Run the scripts after the header (Not reccomended)
Like Nick suggested, in index.php, specify additional scripts before the header is called
Other answers have answered why (you output content before adding the item to the array).
The best solution is to do all your processing before your output. Also helps with error trapping, error reporting, debugging, access control, redirect control, handling posts... as well as changes like this.
Solution 1: Use a template engine.
This may be more complex than you need, and/or add bloat. I use Twig, have used Smarty (but their site is now filled with Casino ads, so that's a concern), or others built into frameworks. Google "PHP Template engine" for examples.
Solution 2: Create yourself a quick class that does the output. Here's a rough, (untested - you will need to debug it and expand it) example.
class Page
{
private string $title = 'PageTitle';
private array $importScripts = [];
private string $bodyContent = '';
public setTitle(string $title): void
{
$this->title = $title;
}
public addImportScript(string $importScript): void
{
$this->importScripts[] = $importScript;
}
public addContent(string $htmlSafeBodyContent): void
{
$this->bodyContent .= $bodyContent;
}
public out(): void
{
echo '<!DOCTYPE html>
<html>
<head>
<!-- Scripts Section -->
';
foreach ($this->importScripts as $script) {
echo '<script src="' . htmlspecialchars($script) . '"></script>' . PHP_EOL;
}
echo '
<!-- End Scripts Section -->
<title>' . htmlspecialchars($this->title) . '</title>
</head>
<body> . $this->bodyContent . '
</body>
</html>';
exit();
}
}
// Usage
$page = new page();
$page->setTitle('My Page Title'); // Optional
$page->addImportScript('script1');
$page->addImportScript('script2');
$page->addContent('<h1>Welcome</h1>');
// Do your processing here
$page->addContent('<div>Here are the results</div>');
$page->addImportScript('script3');
// Output
$page->out();
I'd create a new php file, say functions.php and add the following code into it.
<?php
// script common for all pages.
$pageScripts = [
'common_1.js',
'common_2.js',
];
function addScripts(array $scripts = []) {
global $pageScripts;
if (!empty ($scripts)) { // if there are new scripts to be added, add it to the array.
$pageScripts = array_merge($pageScripts, $scripts);
}
return;
}
function jsScripts() {
global $pageScripts;
$scriptPath = './scripts/'; // assume all scripts are saved in the `scripts` directory.
foreach ($pageScripts as $script) {
// to make sure correct path is used
if (stripos($script, $scriptPath) !== 0) {
$script = $scriptPath . ltrim($script, '/');
}
echo '<script src="' . $script .'" type="text/javascript">' . PHP_EOL;
}
return;
}
Then change your header.php as
<?php
include_once './functions.php';
// REST of your `header.php`
// insert your script files where you needed.
jsScripts();
// REST of your `header.php`
Now, you can use this in different pages like
E.g. page_1.php
<?php
include_once './functions.php';
addScripts([
'page_1_custom.js',
'page_1_custom_2.js',
]);
// include the header
include_once('./header.php');
page_2.php
<?php
include_once './functions.php';
addScripts([
'./scripts/page_2_custom.js',
'./scripts/page_2_custom_2.js',
]);
// include the header
include_once('./header.php');
You are adding 'file03.js' to $import_scripts after including 'header.php', so echoing scripts it have been done yet. That's why 'file03.js' is not invoked.
So, you need to add 'file03.js' to $import_scripts before echoing scripts, this means before include 'header.php'.
A nice way is to move $import_scripts definition to index.php, and add 'file03.js' before including 'header.php'.
But it seems that you want to invoke certain JS scripts always, and add some more in some pages. In this case, a good idea is to define $import_scripts in a PHP file we can call init.php.
This solution will be as shown:
header.php
<head>
<?php
foreach ($import_scripts as $script) {
echo '<script src="' . $script . '"></script>';
}
?>
</head>
<body>
init.php
<?php
$import_scripts = array(
'file01.js',
'file02.js'
);
index.php
<?php
require 'init.php';
array_push($import_scripts,'file03.js');
include 'header.php';
header.php
<?php
echo "<head>";
$importScripts = ['file01.js','file02.js'];
foreach ($importScripts as $script) {
echo '<script src="' . $script . '"></script>';
}
echo "</head>";
echo "<body>";
index.php
<?php
include 'header.php';
array_push($importScripts, 'file03.js');
print_r($importScripts);
Output
Array ( [0] => file01.js [1] => file02.js [2] => file03.js )
I have a basic semi-static website written in PHP. In the root folder I have a file called posts.php and also a folder called posts, in which there are post1.php, post2.php, and so forth and so on.
the posts.php file is in the root folder. When opened it creates a list from the files inside the posts folder and links to them.
In essence, what I want to do is to open php pages that I create statically and store in the posts/ folder in the browser.
The problem is that when I try to open these posts I am unable to. I can hard-link to them, and this "works", but if I do so my base templating will not work.
When I click links I go from one page to the next, and the URL shows ?p=index or ?p=posts. post1.php should be in something like ?p=posts/post1, but it doesn't work.
There may be a problem in naming, since there is a folder and a php file with the same name (posts), but I'm not sure if that's it, nor how to work around it.
edit: Below are parts of the code that I believe pertain to this problem:
my index.php
<?php
require_once('functions.php');
require_once('header.php');
load_page();
// require_once('init.php');
require_once('footer.php');
?>
My header.php
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="utf8">
<title>Paulo RSS Alves</title>
</head>
<body>
<div>
<!-- these are working without any issue -->
<h1><a href='?p=index'>Paulo RSS Alves</a></h1>
<div class="bar">
<p>Posts</p>
</div>
posts.php:
<?php
$dir = scandir('./post');
foreach ($dir as $file)
{
$path_parts = pathinfo($file);
if ($path_parts['extension'] == 'php' and ctype_alpha($file[0])){
// the purpose of this code is to only consider files with
// the .php extension and to remove that extension from the url.
$file_f = str_replace('.'.$path_parts['extension'], "", $file);
echo '<li><a href='.'post/'.$file_f.'>'.$file_f.'</li>';
}
}
?>
and functions.php:
<?php
function load_page() {
(isset($_GET['p'])) ? $page = $_GET['p'] : $page = 'index';
if (file_exists($page) && $page != 'index'){
require_once($page);
} else{
require_once('init.php');
}
}
?>
init.php is merely a welcome screen.
and a schema of my filetree:
index.php
init.php
header.php
footer.php
functions.php
posts.php
posts/
post1.php
post2.php
You are not requiring from the posts folder
<?php
function load_page() {
$dir = './posts/';
(isset($_GET['p'])) ? $page = $_GET['p'] : $page = 'index';
if (file_exists($page) && $page != 'index'){
require_once($dir . $page);
// add directory ^^^^
} else{
require_once('init.php');
}
}
?>
I would like to import a css stylesheet in a page depending on a php condition (or other), this condition is based upon the domain URL.
For example, if the page loaded is "mydomain.com/about-us" import a "css/about-us.css" file.
I have tried with this code, but it does not work.
<?php
$url = $_SERVER['REQUEST_URI'];
if (strstr($url, "mydomain.com/about-us/")) {
include '/css/about-us.css';
}
?>
How can I import, or use a <style> tag conditionally?
solution correct:
the correct solution is use only the page name, so if you page is mydomain.com/about-us/
use " /about-us/" only.
now have other question, with the code posted you can import css for specific page , but I noticed that if the domain is mydomain.com/about-us/team.html example in the page team.html load also the css of "about-us" how load the css for about-us only in the page mydomain/about-us/ ??
How you can read here, strstr will return a string or FALSE. You can change it like this:
<!DOCTYPE html>
<head>
<?php
if (strstr($_SERVER['REQUEST_URI'], "mydomain.com/about-us/")!=false) {
echo '<link rel="stylesheet" type="text/css" href="/css/about-us.css">';
} ?>
</head>
...
</body>
</html>
Or:
<!DOCTYPE html>
<head>
<style type="text/css">
<?php
if (strstr($_SERVER['REQUEST_URI'], "mydomain.com/about-us/")!=false) {
echo file_get_contents('/css/about-us.css');
} ?>
</style>
</head>
...
</body>
</html>
In the first example your CSS is included through the <link> tag, in the second, the PHP-script loads your CSS file into the script-tags. You can not use include because it will load another php file and execute where it was included. You should use my first example, because it is more server-friendly because the CSS file doesn't need to be read. Your page will be faster.
You can add a stylesheet to the page with PHP by including this in the <head> of your html document:
<?php
echo '<link rel="stylesheet" type="text/css" href="' . $file . '">';
?>
Where $file is the name of the css file. You're going to have to provide some more information as to what you're trying to do for a better answer.
Update
The variable $_SERVER[REQUEST_URI] only gives the requested page, not the whole domain. From the PHP manual,
'REQUEST_URI'
The URI which was given in order to access this page; for instance, '/index.html'.
So the code should look as follows:
<?php
$requested_page = $_SERVER['REQUEST_URI'];
if ($requested_page === "/about-us" || $requested_page === "/about-us/") {
echo '<link rel="stylesheet" type="text/css" href="/css/about-us.css">';
}
?>
This will test if the requested page is "/about-us" (the client is requesting the "about-us" page) and if it does, the link to the stylesheet will be echoed.
use this:
<?php
$url = $_SERVER['REQUEST_URI'];
if (strstr($url, "mydomain.com/about-us/"))
{
// output an HTML css link in the page
echo '<link rel="stylesheet" type="text/css" href="/css/about-us.css" />';
}
else
{
// output an HTML css link in the page
echo '<link rel="stylesheet" type="text/css" href="/css/another.css" />';
}
?>
you can also do this to import the css contents directly, but probably some media/images links can break:
<?php
$url = $_SERVER['REQUEST_URI'];
if (strstr($url, "mydomain.com/about-us/"))
{
// output css directly in the page
echo '<style type="text/css">' .file_get_contents('./css/about-us.css').'</style>';
}
else
{
// output css directly in the page
echo '<style type="text/css">' .file_get_contents('./css/another.css').'</style>';
}
?>
My menu system all comes from the index file. A simplified example:
#index.php
...
<div id="container">
include($inc_file) //index.php?site=news will show news.php
</div>
...
My question is: how can I only include some js-files and css-files when they are needed. For example, I have a file with a slider. I would like only to include the js/css-files related to the slider when visiting that page.
I know that I can make if/else clauses, but I find that a bit ineffective. Is it possible to place a session containing an array with all the files that should be included on the frontpage?
Here is what I would use:
<?php
$path_parts = pathinfo(__FILE__);
$filename = $path_parts['filename'];
if ($filename === "somepage") {
?>
<script src=""></script>
<link ...>
<?php } ?>
I would just have a preset array for each page with an array of css/js files it would need to include.
eg.
settings.php
<?php
$pages = array();
$pages['index'] = array(
"css" => array("main.css","index.css"),
"js" => array("jquery.min.js","someotherjs.js")
);
$pages["about"] = array(
...
);
index.php
<?php
include('settings.php');
?>
...
<head>
<?php
foreach($pages['index']['css'] as $css)
echo "<link rel='stylesheet' type='text/css' href='$css'>";
?>
...
<?php
foreach($pages['index']['js'] as $js)
echo "<script src='$js'></script>";
</body>
</head>
This may not be the answer you were expecting but did you know that the browser does not download css or js files that have not changed since the last time they were downloaded. They are cached on the client PC and only refreshed if the copy on the server has changed.
Theerfore you may not need to be so selective about what you load on each page as it probably wont cause a fresh download of a css or js file.
Prepare an object where you can add style or js files as you need, here a little example.
class head {
private styles = array();
private scripts = array();
public function __construct() {}
// add script in page
public function add_script(filepath){
array_push($this->scripts, filepath);
}
// add style in page
public function add_style(filepath){
array_push($this->styles, filepath);
}
// get html <link> for styles
public function get_styles(){
$html = '';
$len = count($this->styles);
for($i=0; $i < $len; $i++){
$html .='<link rel="stylesheet" type="text/css" href="'.$this->styles[$i].'">';
}
return $html;
}
// get html <script> for scripts
public function get_scripts(){
$html = '';
$len = count($this->scripts);
for($i=0; $i < $len; $i++){
$html .='<script type="text/javascript" src="'.$this->scripts[$i].'"></script>';
}
return $html;
}
}
// destruct ...
in your controller :
require('/class/head.php');
$head = new head();
$head->add_style('/css/myStyle.css');
$head->add_script('/js/myScript.js');
in head
<?php echo $head->get_styles(); ?>
<?php echo $head->get_scripts(); ?>
hmmm, i know i can do this with jquery but i'm trying no to use javascript and instead use php. also to learn from.
I have a folder hierarchy like this
modules
|-navagation
|-js
|-nav.js
and I want to find a way to append that .js to the
<head></head>
like this
<html>
<title></title>
<head>
<script scr="jquery.js"></script>
<script src="nav.js"></script>
</head>
</html>
My goal is that I want to upload modules to my modules folders and have the php automatically pick it up and load up the resources from the modules.
One thing that I'm struggling with is that I'm loading my files via Smarty using .tpl to display my markup. Thats the only berrier i'm dealing with.
my original method was this but because I'm doing it with template files i'm at a loss.
ob_start();
include(THEME_PATH . "/index.html");
$content = ob_get_contents();
ob_end_clean();
// Scripts to include
$scripts = BaseHelper::include_script("http://code.jquery.com/jquery-1.4.2.min.js");
$scripts .= BaseHelper::include_script("js/jquery.sound.js");
$scripts .= BaseHelper::include_script("js/jquery.jblock.js");
$scripts .= BaseHelper::include_script("js/init.js");
// Add scripts to theme
echo str_replace("</head>", $scripts . "\n</head>", $content);
I would turn your index.html template page into a php page, create your scripts prior var prior to including the template and then render them from within the included template file:
ob_start();
// Scripts to include
$scripts = BaseHelper::include_script("http://code.jquery.com/jquery-1.4.2.min.js");
$scripts .= BaseHelper::include_script("js/jquery.sound.js");
$scripts .= BaseHelper::include_script("js/jquery.jblock.js");
$scripts .= BaseHelper::include_script("js/init.js");
include(THEME_PATH . "/index.php");
$content = ob_get_contents();
ob_end_clean();
index.php:
<head>
<?php echo $scripts ?>
</head>