I have a fully functioning PHP system with various .php files handling different processes.
i need to add in a specific set of javascript code to every single page that's generated.
can any one tell me How to do this? is its possible thanks
Your "system" should include same header for all of the pages. And put your javascript to that file.
like:
header.php
<html>
<head>
<script>
// some script
</script>
</head>
<body>
index.php (main file)
<?php
include "header.php";
// Content
include "some_content.php";
include "footer.php";
?>
footer.php
<div><p>My footer</p></div>
</body>
</html>
Apart from the above methods, you can do this by another method.
Save the javascript as a separate file(code.js) and then using
<?php include("code.js"); ?>
in each of your files.
create a php footer and include this to every page. Place the markup for the script in the footer. The benefit of placing your javascript in the footer is that the page will render the page before trying to execute the script, making your page seem to load faster.
For each page add include "footer.php"
Create a master page which other pages will be included as child pages. In header of the master page the js files can be included and handled by checking you requested url
Example:
$requested_url = $_GET['requested_page'];
...
<script type="text/javascript" src="js_path/<?php echo "$requested_url.js" ?>" ></script>;
...
Related
So I have a website, https://coolkids.gq. I want to be able to add a certain line of code to every single HTML file on the website using another HTML, JavaScript or PHP file, but I am not sure how to do this.
How would I be able to write a script to add a line of custom code to every HTML page on my website?
Edit: As pointed out by charlieftl, I should clarify that all files are saved in either the /htdocs folder or in a folder inside of that.
yes you can, just make some folder named include or whatever and create for example loginForm.html sth like
<div>
<form>
....
</form>
</div>
and in pages where you want to put it use
<?php require('./include/loginForm.html') ?>; in place where you need it
Of course it need to be PHP page.
Good thing is to have also included header and footer in external html and include it on every php page ;D
if you want some js script in every page you need to add it manualy:
<script src="js/main.js"></script>
but it can be included in footer.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have right now one project on static HTML with two languages and I have to manage everything by myself.
So if something new appears in header/footer I have to update 20 HTML files.
Also this project is hosted on normal shared hosting.
How can I make less painful, if I have to change something?
Right now i just bulk find/change in folder with sublime.
P.S I can't use any CMS. Must be static.
Since it has to be static, you probably can't use PHP.
An alternative that works on modern browser would be to use Javascript to include the header and footer from another file.
You have several options, one is using jQuery load(). Example to include two files contained in the resources folder :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo load for header and footer</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="header"><!-- HEADER COMES HERE --></div>
<!-- Main content comes here -->
<div id="footer"><!-- FOOTER COMES HERE --></div>
<script>
$(document).ready(function() {
$( "#header" ).load( "/resources/header.html" );
$( "#footer" ).load( "/resources/footer.html" );
}
</script>
</body>
</html>
Please, consider a fallback by filling the #header and #footer divs with a content that would be displayed if javascript is not enabled. Also consider a fallback if load() doesn't work (look at the doc for this, there is an example).
Suggestion One:
P.S I can't use any CMS. Must be static.
You can use the Jquery to load up the files that you have in the respective place based on the needs that you have.
.load( url [, data ] [, complete ] )
Description: Load data from the server and place the returned HTML into the matched element.
Note: The event handling suite also has a method named .load(). jQuery determines which method to fire based on the set of arguments passed to it.
Reference: http://api.jquery.com/load/
$(document).ready(function() {
$('#some-menu').load('some-local-path/menu.html');
});
Provided you can have the ID of the DIV as you given and then it will load up the data over to that place and you can change it dynamically.
<html>
<body>
<div id="some_menu">
<!-- Loads the Menu Part Over Here -->
</div>
<script>
$(document).ready(function() {
$('#some-menu').load('some-local-path/menu.html');
// Like wise you can load up all the data that you need over here and place the necessary div over to the HTML.
});
</script>
</body>
</html>
If it is not a static you can follow up with the below one as i have mentioned using the PHP.
Alternative Reference:
It is better to use PHP since it supports awesome features and you can create your own CMS using the PHP.
More Clear Explanations
Look for the items that are being static on to your site and it has to be shown in all the pages.
Copy them and place in the respective files namely header in the header.php and footer in footer.php and so on and then you need to do one more thing alone.
You need to include all the files that are being given by you and thats the trick.
Entire Page will look like.
<html>
<head>Title of the Page</head>
<?php include 'scripts.php'; ?>
<body>
<?php include 'header_menu.php'; ?>
// Page content
<?php include 'sidebar.php'; ?>
//Page Contents
<?php include 'footer.php'; ?>
</body>
</html>
Like this way you can do it for your header,footer and whatever files you need to do so and if you update the single file alone it will be replicating in all the files even tones of files you have.
Basic include example
The include() statement includes and evaluates the specified file.
The include command simply takes all the text that exists in the specified file and copies it into the file that uses the include command. Include is quite useful when you want to include the same PHP, HTML, or text segment on multiple pages of a website. The include command is used widely by PHP web developers. Like PHP Echo, include is not a function, but a language construct.
vars.php
<?php
$color = 'green';
$fruit = 'apple';
?>
test.php
<?php
echo "A $color $fruit"; // A
include 'vars.php';
echo "A $color $fruit"; // A green apple
?>
Put the HTML content of the header in a PHP file and include it in every page, like this:
<?php include('header.php'); ?>
This way you only have one file (header.php) to edit.
More details on include() can be found at: http://php.net/manual/en/function.include.php
as far as I understood if you want to manage many HTML files in a static web I think you need a HTML template.
I would recommend to use "http://handlebarsjs.com/" you can use it as well in static pages.
I hope it helps.
I'll summarise. Please correct me wherever I was not able to phrase my question correctly.
I have a few PHP pages, all of them have the following format:
<?php
include "header.php";
?>
INSERT PAGE SPECIFIC MATERIAL HERE
<?php
include "footer.php" ?>
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Main CSS -->
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<navmenu></navmenu>
footer.php
<footer></footer>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Theme JavaScript -->
<script src="js/main.js"></script>
</body>
</html>
I am new to PHP and not sure if this is the correct way to efficiently structure my PHP files because my concerns are:
Each PHP page now loads the same navigation menu and footer. This is intended and is ok. However, it also loads ALL CSS and JS together, even when there are lots of lines of CSS and JS where it is not actually useful in that specific page BUT used in other pages. Is this a need for concern and if yes what ways should we go about doing this?
Should I separate my main.js, style.css, header.php and footer.php so that each PHP page loads the minimum amount needed for the body functions?
What is the standard practice when dealing with this case?
Would appreciate it if you can give some advice!
Should I separate my main.js, style.css, header.php and footer.php so that each PHP page loads the minimum amount needed for the body functions?
You should create ONE css file and ONE js file for your entire web site. don't use php file act as css because:
If you have high visited web site, It's better to have ONE css and js file. Because It's a direct file. but when you are creating css or js by php file, php need to calculate. Maybe you think it's fast calculation, but if you need a good performance on high visited web site, it matters.
If you create css and js file by php, sometimes you need to import multiple js or css file. Who knows? maybe it makes you to use 10 js and 10 css inside your head tag! and It's bad for SEO.
Don't worry about one css or js file size. It's better with lower size but you can still create 100KB css or js file without SEO problem.
You can have one css file for all media. print included. Doesn't matter you are using multiple or single file, always use #media print{} inside the same file if you need it.
ONE css and js file can be globally cached. even if you don't need the css or js file, the global css and js file are already cached.
I'm not saying ONE css and js file is always great idea but it has the most benefit.
If you want to reduce the ammount of css/js on your page, then you can do something like this... Call your CSS with:
<link rel='stylesheet' type='text/css' href='css/style.php' />
Inside style.php it would look like something like this:
<?php
switch(basename($_SERVER['PHP_SELF'])){
case 'index.php':
echo 'CSS code for index.php gos here';
break;
case 'login.php':
echo 'CSS code for login.php gos here';
break;
}
?>
Unless you've got like lots of styling and javascript which is confirmed to be seriously increasing load time, then it's fine and I wouldn't do the above.
<?php
$filename = basename(__FILE__, '.php');
?>
<link rel="stylesheet" href="css/<?= $filename ?>.css" />
...
<script src="js/<?= $filename ?>.js"></script>
Drawbacks:
1. Naming each CSS and JS file as your PHP file.
2. Each PHP file should have its own CSS and JS files
P.S: Minimizing all your styles and scripts to only one file loads your pages faster.
Yes it is good approach to manage code. To include same header and footer you can easily add/update/remove menus and other functionality without edit every page file.
I am new to JS and programming in general and hope someone can help me with this.
I am currently working on building a website where every page has its separate HTML / PHP file.
jQuery and my global / general JS functions are included in the footer of all these pages through a separate includes file "footer.php".
So far everything works as intended.
Now I have some pages that will use specific jQuery functions so I want to load the corresponding JS only if such a page is loaded.
To do this I saved the corresponding codes in separate JS files (e.g. nameOfExternalJsFile.js) and wrapped everything in there in the following:
$(document).ready(function(){
// ...
});
I then made the following updates to the corresponding PHP pages (example):
<head>
<?php
require_once("includes/header.php");
?>
<!-- here I want to include the specific jQuery functions -->
<script src="includes/js/nameOfExternalJsFile.js"></script>
</head>
<!-- ... -->
<!-- here I include the main JS functions -->
<?php require_once("includes/footer.php"); ?>
I have two concerns with this:
I am not sure if this is the right way of including such files since
I need to have them available on document ready.
I include my main JS in the footer since I was told this improves
performance but can I then include jQuery functions in the header at all ?
Can someone let me know if this is correct or if I should change anything here ?
Many thanks for any help with this.
Wrapping the functions in $(document).ready automatically takes care of this concern. From the JQuery documentation on document.ready.
A page can't be manipulated safely until the document is "ready."
jQuery detects this state of readiness for you. Code included inside
$( document ).ready() will only run once the page Document Object
Model (DOM) is ready for JavaScript code to execute.
Technically it doesn't matter whether you include the scripts in the header or the footer, as long you load JQuery first and your script second.
That said, it's generally recommended that both scripts go just before the closing body tag to increase performance as you suggested. There are some articles that discuss this like this post from performance expert Steve Souders and this guide from the Yahoo! Exceptional Performance team.
You should load the $(document).ready(...) stuff only after you have loaded jQuery, that is, in the footer file, after the jQuery <script> tag, like this :
<script src="includes/js/jQuery.min.js"></script>
<script src="includes/js/nameOfExternalJsFile.js"></script>
It`s good practise to locate all the JS files in the end of the body
<html>
<head></head>
<body>
... Some HTML
<script>SomeScripts</script>
</body>
</html>
</pre>
If you want to be sure that your external scripts are loaded after page load use:
$(function(){
/* Your code from the scripts */
});
You can change the content of footer.php to include /nameOfExternalJsFile.js manually at the bottom of the page. That´s the safest way to do it because you may load jquery before loading others scripts.
So Google tells me to do this:
Paste your snippet (unaltered, in it’s entirety) into every web page you want to track. Paste it immediately before the closing </head> tag.
I understand this part, but as I'm including my header and footer, I guess this is not what I'm supposed to do.
If you use templates to dynamically generate pages for your site (like if you use PHP, ASP, or a similar technology), you can paste the tracking code snippet into its own file, then include it in your page header.
So I guess this is what I'm talking about(?), but I don't really get exactly where they want me to put the snippet. Do I put it in my header.php file once right before the closing </head> tag and then include the header.php file into every page or do I have to put the snippet directly in on every page? Incase I have to put the snippet in on every page, where exactly do I put it? Could someone please give me an example of this?
You can paste the Google Analytics Javascript snippet into its own file, call it ga.js for example.
Then in your header.php file, right before you close the tag, include that Javascript file, like so:
<script type="text/javascript" src="ga.js"></script>
This will load the GA code in your head section every time you load the header.php file. This should happen to every page that you load header.php automatically.
If you already have split your header, that I guess is included into you other html or php files, in it's own file and it includes the </head> tag, then you can put a script right above it.
This would look something like this:
[...]
<script>
<!-- Your personal google analytics snippet -->
</script>
</head>
Then all sites, that include your header.php, also load the snippet from analytics and get tracked.