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(); ?>
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 )
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>
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'm trying to create a queue function for javascript files. Basically, this is the way I want it to work:
I want to create a function that will take all of the javascripts sent to it and put them in the appropriate place on the page (i.e. header or footer, and above dependent scripts).
I want to be able to say:
Here's a script. Add it to the queue in the order that it should be in. Then, after all the scripts have been queued up, run the function to write them to the page.
So far my code looks like this:
$scripts = array();
function enqueue_script($src="", $script_name="", $script_data="",
$script_dependencies=array(), $force_header=false, $additional_atts=array()){
global $scripts;
//run check for duplicates
//run check for dependencies already in the variable
//run checks to see if this script depends on other scripts
//$scripts array is saved in increments of 10 to allow for up to
//9 dependants
$i = count($scripts);
$i = ($i*10)+10;
$scripts[$i]['src'] = $src;
$scripts[$i]['script_name'] = $script_name;
$scripts[$i]['script_data'] = $script_data;
$scripts[$i]['dependencies'] = $script_dependencies;
$scripts[$i]['force_header'] = $force_header;
$scripts[$i]['atts'] = $additional_atts;
}
function write_scripts_header() {
global $scripts;
$echo = "";
$atts = "";
//create script tag for insertion in header
foreach($scripts as $s){
if($s['force_header']){
foreach($s['atts'] as $a => $v){
$atts .= " {$a}='{$v}'";
}
if($s['src']!=""){
$echo .= "<script src='{$s['src']}'{$atts}></script>\n";
} else {
$echo .= "<script{$atts}>{$s['script_data']}</script>\n";
}
}
}
echo $echo;
}
function write_scripts_footer() {
global $scripts;
$echo = "";
$atts = "";
//create script tag for insertion in footer
foreach($scripts as $s){
if(!$s['force_header']){
foreach($s['atts'] as $a => $v){
$atts .= " {$a}='{$v}'";
}
if($s['src']!=""){
$echo .= "<script src='{$s['src']}'{$atts}></script>\n";
} else {
$echo .= "<script{$atts}>{$s['script_data']}</script>\n";
}
}
}
echo $echo;
}
Then, in the HTML file part:
<html>
<head>
<?php write_scripts_header();?>
</head>
<body>
<?php write_scripts_footer();?>
</body>
</html>
This works fine if the HTML section is loaded last. However if I have an include that happens in the middle of the body tag, and that include needs to enqueue_script() in the header, then the $scripts variable isn't ready yet when the write_scripts_header() function runs.
How can I make write_scripts_header() and write_scripts_footer() wait until all the scripts have been queued up before running? Or....is there a better way to allow for a scripts queue so that I can write all the scripts to the document at the end?
If it's all running in the same file, Can you make the body content be a variable, $body, and load it first, then echo it into the <body> section?
change
<html>
<head>
<?php write_scripts_header();?>
</head>
<body>
<?php write_scripts_footer();?>
</body>
</html>
to
print "<html><head>".write_scripts_header()."</head><body>".write_scripts_footer()."</body></html>";
Try using a template engine, such as Twig, and you'll be able to output your html after you're done preparing your scripts-array.
I have a simple image-looping script that changes the src of an image.
function cycleNext()
{
++imgIndex;
if(imgIndex>imgCount)
{
imgIndex = 1;
}
setImgSrc(imgIndex);
}
However, at present, I'm (shudder) manually entering imgCount in my script. The alternative is server-side, but I don't know how to fetch this information. I imagine it's pretty simple, though.
How can I use PHP to supply this script with the number of images in the folder?
<?php
$directory = "Your directory";
$filecount = count(glob("" . $directory . "*.jpg"));
$filecount += count(glob("" . $directory . "*.png"));
?>
Repeat the 2nd line for each extension you wish to count.
function cycleNext()
{
++imgIndex;
if (imgIndex > <?php echo $filecount;?>)
{
imgIndex = 1;
}
setImgSrc(imgIndex);
}
That should do it.
EDIT:
function cycleNext(imgCount)
{
++imgIndex;
if (imgIndex > imgCount)
{
imgIndex = 1;
}
setImgSrc(imgIndex);
}
Then when you call cycleNext, call it with the variable.
cycleNext(<?php echo $filecount; ?>);
if the .js file is a separate file. then you can do this:
change the .js for a .php
then you can add <?php ?> tags just like you do in your .php files.
just don't forget to add the header in the code, indicating that the file is a javascript file. like that:
<?php header("Content-type: text/javascript"); ?>
and you will call the file with it's actual name src="file.php"
You can do it in three ways:
Making your .js file a .php file (with the correct mime-type) and just use an echo in that .js.php-file
include the javascript to the <head> tag of your page
echo a variable into a <script> tag in your <head> and use it in your javascript file. Example:
<script type="text/javascript">
var imgCount = <?php echo $imagecount ?>
</script>;
During the generation of the HTML code, simply insert a <script> line, for instance
echo '<script type="text/javascript">';
echo 'var imgCount=' . $NumberOfImages . ';';
echo '</script>';
Just ensure that line is provided before cycleNext() is called (or imgCount is used).