3

Quick and should be simple question, but i cant find the answer!!! So im trying to make a universal header called header.php. Now the only problem is that some pages have 5 css style sheets while others have only 2. And some pages have 5 js links in the header while some only have 1. How do i account for this variability in css and js links in the header? Am i suppose to use if statments? Variables? Thanks!

1
  • 1
    Ben, you might want to use output buffering. It's a widely used mechanism which allows to do stuff in page later on after rendering it. Commented Mar 19, 2011 at 8:04

4 Answers 4

2

Consider combining resources to single ones. This will minimize HTTP requests which is a good practice.

Sign up to request clarification or add additional context in comments.

5 Comments

are you suggesting that i combine all my css into one file and all my javascript files into one file?
Not the CSS and the js but all CSS to a single one and all js to another one :)
ive been thinking about that, but if i put 5 pages of stylesheets into one stylesheet, that might make things harder to find.
This is another problem (try to structure nicely your stylesheet) but if you are going for performance, you might want to compress your css at the end so readability doesn't matter when it's compressed.
@Ben this issue can be solved by incorporating a build script into your development cycle
1

Instead of creating a static header.php, create a function to include javascript files dynamically. For example, you need only jquery & jquery ui js references for page1, so you call

include_js('jquery', 'jquery-ui')

where include_js is your function which will insert respective JS files.

Similarly, in page2, you need assume you need jquery & jquery.fancybox

include_js('jquery', 'jquery.fancybox')

2 Comments

Correct me if I'm wrong (very late, very tired) but this doesn't really answer @Ben's question. Each page would have different arguments being passed into the include function, so every header would end up being different. Ben is looking to use a universal header for every page.
@Moses He can have universal header.php for other things like title, meta tags..etc and use this function to add JS references. Using if else makes the code look really ugly if you want to do everything inside header.php. It could probably look like 'include_once "header.php; include_js('jquery')'
1

You should be using a setup like this. Of course, you might want to make it so that the styles are included from your view and not your controller. Can't give a better answer without knowing your setup.

In your controller

$styles_for_layout = array();
$scripts_for_layout = array();

//and whenever you need to include a script in for your particular view
$scripts_for_layout[] = 'script_for_page.js';
$styles_for_layout [] = 'style_for_page.css';

headerp.php

<?php if(!empty($styles_for_layout))?>
  <?php foreach ($styles_for_layoutas $style) : ?>
     <link rel='stylesheet' href='<?php echo $style ?>'>
  <?php endforeach; ?>
<?php endif; ?>

<?php if(!empty($scripts_for_layout))?>
  <?php foreach ($scripts_for_layout as $script) : ?>
     <script type='text/javascript' src='<?php echo $script ?>'>
  <?php endforeach; ?>
<?php endif; ?>

11 Comments

@JohnP are we agree about this is unnecessary, ugly and messy?
@fabrik Of course you can refactor the code to helpers so 1 line like echo $scriptsForLayout() will suffice, but I think this is the way to go. It's only unnecessary if he has ~ two CSS/JS files with no overlap to be included. PHP frameworks have this method in place as well
@JohnP No, this not what i'm talking about. This will be hard to maintain, it mixes code and html in a bad manner so i'll avoid to use it.
How is this hard to maintain? You don't touch your layouts once you put it in. And PHP always mixes code and HTML (look at any of the numerous frameworks). And like I said, you could always move this out to a helper function or something
And what about when you need new pages, new scripts, etc? You'll touch your PHP code first rather than your HTML? Seems so unwanted.
|
0

Loading all the CSS and JS file in every page won't matter much as after a first load, they will be cached and not retrieved again.

Therefore, you could just bundle them and not worry if you really need a particular file in the current page or not.

5 Comments

correct me if im wrong, but dont i have to worry about http requests? So if a page only needs one css stylesheet, and if the header included 5 stylesheets and 5 javascript files, wouldnt that generate 9 extra http requests for that one page and slow things down ?
For that particular page, yes it will slow things down. However, as I mentioned that it will be cached and subsequent request to those files will not load them again in that session of browsing.
I disagree. Nevermind the fact that loading all your scrips/styles at once can seriously mess up your code (by triggering events/ applying styles when they aren't supposed to) it's just unnecessary. This is understandable if you want to preload resources from a very light page, but otherwise not required.
Note: caching working efficiently only if resource headers are set up properly.
Gunner, the problem in this case is loading - the browser slows down more when many resources are loaded, even if none (or few) are actually used.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.