So, I'm trying to build a web site based on my own MVC-like PHP model.
let's say that every view consists of at least 2 parts:
let those be 'template.php' and 'mypage.php' (the second part depends on the specific page, the first part is common).
template.php has the following code (in simplified version):
<html>
<title>Sometitle</title>
<link rel='stylesheet' href='/css/gen.css' type='text/css' />
<script type='text/javascript' src='/js/gen.js'></script>
<?php echo $other_external_files; ?>
</head>
<body>
<div class="some_header_and other stuff">...</div>
<div class="workfield">
<?php include_once mypage.php; ?>
</div>
</body>
</html>
The problem that 'mypage.php' (as well as some other pages) has some specific .css and .js files that should be included.
The question is: Which is the best option to include these files (how and where)?
Here are my thoughts:
I could define the variable $other_external_files in a model or controller, but don't really want to do that, because .css file is normally part of the view and I could hardcode it in 'mypage.php', if only it would not need to stay in <head>.
I understand that .css and .js files can be dynamically included with JavaScript, but I'd like to avoid this solution if there's no strong need in it.
I could define all these variables in the corresponding models. The problem here is, that from the very beginning I've been trying to structure my models based on the content (thus, I have universal models (files and Classes) like 'Users', 'Shop_items' etc, that don't necessarily correspond to every view file (it means I basically don't have any mypage_model.php, just 'items_model', 'users_model' etc.). Defining title of the page in a model will force me to add lots of model files.
I could possibly auto-define the variable $other_external_files in the core View class, like this:
-
function __construct($action){
$this->action = $action.'.php';
$this->css_file = 'css/'.$action.'.css';
}
function generate($view_lvl, $data = null){
$other_external_files = $this->css_file;
require_once $action;
}
However, this approach seems to be limited, because possibly there can be a situation, when I'd like to include several files with quite different names.
My personal choose for now is the 3rd., because it allows not only to append css and js, but also easily define title of the document and other possible variables... but before multiplying my files, I'd like to consult experienced programmers you are if it's really the right way.
Thanks a lot and sorry for a long question. Any help is very much appreciated!
I usually don't go for this kind of formation. Experience has proven to me that if I separate each view/page as a single file, it'll be more useful. I always use your strategy for pages that they're more template like and when it comes to page's distinct properties like title I make it so strict to not get confused. For instance, I get those properties from a single place like a database table of pages.
For resources like JavaScript or CSS files I include them exactly like in a normal page in every view. I think it's better to not populate them in a variable like $other_external_files; and instead put them differently in each separated view.
For example, this is my about.php view:
<html>
<head>
<title>About</title>
<link rel='stylesheet' href='<?php echo ABS_PATH; ?>/css/extra.css' type='text/css' />
<link rel='stylesheet' href='<?php echo ABS_PATH; ?>/css/extra2.css' type='text/css' />
<script type='text/javascript' src='<?php echo ABS_PATH; ?>/js/extra.js'></script>
</head>
<body>
</body>
</html>
And this is my contact.php view:
<html>
<head>
<title>Contact</title>
<link rel='stylesheet' href='<?php echo ABS_PATH; ?>/css/extra3.css' type='text/css' />
<script type='text/javascript' src='<?php echo ABS_PATH; ?>/js/extra.js'></script>
<script type='text/javascript' src='<?php echo ABS_PATH; ?>/js/extra2.js'></script>
</head>
<body>
</body>
</html>
For my very dynamic page:
<html>
<head>
<title><?php echo $TITLE; ?></title>
<link rel='stylesheet' href='<?php echo ABS_PATH; ?>/css/extra3.css' type='text/css' />
<script type='text/javascript' src='<?php echo ABS_PATH; ?>/js/extra.js'></script>
<script type='text/javascript' src='<?php echo ABS_PATH; ?>/js/extra2.js'></script>
</head>
<body>
</body>
</html>
If you look at my dynamic page you see that I pass actual data to it. This means I get relevant data from my controller and then I pass it through.
Related
I have some HTML pages (in "web" folder) that use some styles and scripts, and i need to show these HTML pages using a PHP script. Here is a simplified version of the code i'm using:
<?php
readfile("web/index.html");
It works but it doesn't load any resources (css, js, images) because the URLs are not absolute :
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
It doesn't find the resources because it's looking for the css folder in the same folder as the PHP script.
Any workaround for this ?
You'll need to add add <base href='...'> into the html, like this (not tested):
$page_content=preg_replace("%</head%i","<base href='web/'></head",$page_content);
insert this after the readfile. See MDN web docs for more information about that tag.
In some browsers (Firefox and edge at least) it also works if you print the base tag before you output $page_content. It's dirty, but maybe it's good enough.
Simple you can use something like this
index.php
<html>
<head>
<php include("menu.php"); ?>
</head>
<body>
</body>
</html>
menu.php
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
for base path use some variable like $base = "http://localhost" then use your elements like <img scr="<?php $base ?>/images/myimage.jpg" />
Hope this answers your question
I recently asked a question about my php includes and received the answer. Now that the include accesses the correct file, my html/css/javascript web pages show some hope. The only issue is that the php includes of the pages have this look:
Instead of this:
Is there a way for the php includes to access the css files? My current code for one page that contains the includes is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="main.js"></script>
<title> Water Polo, The Best Sport</title>
</head>
<body>
<div class="wrapper">
<?php
include'../includes/header.php';
?>
<?php
include'../includes/navbar.php';
?>
<div class= "content">
</div>
<?php
include'../includes/footer.php';
?>
</div>
</body>
</html>
Header.php
<?php echo'<div class ="header">
<h1>The Best Sport</h1>
<h1 class="sitetitle">AllWaterPolo</h1>
<img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" />
<h2 class="homeScreenLink"> Water Polo!</h2></div>';>
To develop the website I am currently using MAMP and running the code which is in a folder by putting it in htdocs.
I took the header out of the php include and made the css file work with the document, but one thing remains the same. The code that I included in the document via php does not take on the effects of the css document, but the header, which now is out of the include and is written write in the document works. Is there a way to allow the code which has been included via php to access the working css file? If it would facilitate the answering process, I'll post any necessary pictures. Just comment below.
You have correctly identified the problem, that the HTML cannot find the CSS. That is directly because of this tag:
<link rel="stylesheet" href="styles.css" type="text/css" />
Specifically, this part of the tag:
href="styles.css"
You have told your code to look for the styles.css file in the same directory as the index.php file. Is that correct?
Usually, the web site structure looks like this:
public_html
- css
- js
- includes
- img
Your website seems to be structured like this:
includes
public_html
Imagine yourself inside the index.php file. All files that are INCLUDEd become part of index.php, as if they were there originally. So, you are expecting to find the CSS file here (as per your <link rel="stylesheet" tag):
public_html/style.css
If they are really inside a CSS folder, then perhaps this will fix it:
<link rel="stylesheet" href="css/styles.css" type="text/css" />
Update:
No need to echo out your HTML in PHP, you can literally just do this:
header.php
<div class ="header">
<h1>The Best Sport</h1>
<h1 class="sitetitle">AllWaterPolo</h1>
<img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" />
<h2 class="homeScreenLink"> Water Polo!</h2>
</div>
If the other include files are similar, then it appears your rendered file will all be HTML. Therefore, the next step is: where is your style sheet? Try this. In the address bar of your browser, type:
localhost/styles.css
And see if your stylesheet appears. If not, try this:
localhost/css/styles.css
If the second one works, then change this:
<link rel="stylesheet" href="styles.css" type="text/css" />
to this:
<link rel="stylesheet" href="css/styles.css" type="text/css" />
Note: I might not have your path structure correct. Amend as required.
Short answer = no.
You may want to look into using SASS. Besides minifying the css files, you can also set it up so the main (in your case styles.css) pull from several SASS files. For example you could have the following SASS files: main.scss, header.scss, navbar.scss, & footer.scss. If your IDE supports SASS, when you save any one of these files it can automatically compile all four into your styles.css file. Then all you need is to reference that one file and you are set.
http://thesassway.com/beginner/how-to-structure-a-sass-project
For example, my site has 5 CSS files like this...
<link rel="stylesheet" href="/templates/purity_iii/css/custom_marketing.css" type="text/css" />
<link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />
<link rel="stylesheet" href="/templates/purity_iii/css/custom_fleet.css" type="text/css" />
<link rel="stylesheet" href="/templates/purity_iii/css/custom_service.css" type="text/css" />
<link rel="stylesheet" href="/templates/purity_iii/css/custom_corporate.css" type="text/css" />
Every page of the site will be in one of those "categories" (i.e. marketing, gps, fleet, service or corporate). And this is indicated by a class on the HTML tag. So something like this at the top of every page...
<html class="gps">
I currently have EVERY page calling all 5 style sheets listed above, but it only NEEDS the corresponding style sheet, so I'd like to be efficient if possible.
Is there a way using PHP (or whatever makes sense) to essentially search the tag's class for "gps" or "fleet" (etc.) and if, for example, it found "gps", I could then echo only that style sheet, i.e...
echo "<link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />";
This totally depends on how PHP generates your HTML. Another possibility is to do this with JavaScript. You can do it like this:
<script type="text/javascript">
var file = 'templates/purity_iii/css/custom_' + document.documentElement.className + '.css';
var link = document.createElement('link');
link.href = file;
link.type = 'text/css';
link.rel = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
You can for example place the code above between <head> and </head>. Not really a valid answer to your question (PHP solution), but you could consider this as an alternative.
This seems like a poor strategy, albeit I don't know the size of your CSS files and other parameters.
How different are these pages as far as their style goes? From the file names above it looks like you might have a lot of redundant (duplicate) CSS selectors in each file. How much of the CSS in each of those files is actually unique? Is it 5k? 10k? 50k? If it's fairly small, go ahead an put it all in one file. By placing it in one file all the CSS for all the pages of your site will be cached in the user's browser and no additional requests would be needed for subsequent pages.
If combining all files and you have a 500k file and 250k is for a single page then splitting it would make more sense.
A PHP Solution
I'm guessing that your setting the CSS class on the <html> tag with PHP. If so, why not check the value of that variable in your PHP script and add the appropriate CSS file.
Something like this:
<html class="<?php echo $page_class; ?>">
<head>
<link href="custom_<?php echo $page_class; ?>.css">
</head>
This is advice is fairly general but hopefully it points you in the right direction.
try something like
<?php
if($page_type = 'gps')
{
?>
<link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />
<?php
}
elseif($page_type = 'marketing')
{
?>
<link rel="stylesheet" href="/templates/purity_iii/css/custom_marketing.css" type="text/css" />
<?php
}
?>
This is a bit hard to explain but I'll give it a go. Lets say I have this in the header of a HTML file called myFile.html:
<!doctype html>
<head>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/hovers.js"></script>
<link rel="stylesheet" href="css/highlight.css">
</head>
I now want to include this file in a php file, lets say index.php. However, all my assets (css, js, etc) are stored in a folder called assets/.
After including (or before?) this html file, is there a way to change all the asset paths to point to assets/*. For example, 'css/reset.css' would be changed to 'assets/css/reset.css' and so on. Note that this isn't just limited to these lines in the header, but also includes things like image elements, etc.
If that's confusing, let me know and I'll try explaining again!
Cheers :)
I usually define a constant for things like this, then it's easily changeable via a config file. It does mean going through your template files and adding this constant variable in, but after that it becomes really easy to change.
So your file would be something like this:
<?php
require_once('config.php');
include('header.php');
config.php would be something like this:
<?php
define('ASSETS_ROOT','/assets/');
and header.php would be like this:
<!doctype html>
<head>
<link rel="stylesheet" href="<?php echo ASSETS_ROOT; ?>css/reset.css" />
<link rel="stylesheet" href="<?php echo ASSETS_ROOT; ?>css/style.css" />
<script src="<?php echo ASSETS_ROOT; ?>js/hovers.js"></script>
<link rel="stylesheet" href="<?php echo ASSETS_ROOT; ?>css/highlight.css">
</head>
I am using zend and not using AJAX in my site. Therefore I have to include all my CSS and JS files in head section of every phtml page.
<html>
<head>
<link rel="stylesheet" type="text/css" href="mycssfile.css" />
<script type="text/javascript" src="myjsfile1.js"></script>
<script type="text/javascript" src="myjsfile2.js"></script>
.........
</head>
<body>
.........
</body>
</html>
Whenever I add any new CSS/JS file, I have to include it everywhere. Is there a good way that I can include all my CSS and JS file in a file/place and use that reference everywhere. May be there is a good way in zend.
I usually put my static suff in the bootstrap of the application in the _initViewHelpers method :
$this->bootstrap(array('frontcontroller', 'view'));
$frontController = $this->getResource('frontcontroller');
$view = $this->getResource('view');
$view->headLink()->appendStylesheet($view->assetUrl('/css/reset.css'))
->appendStylesheet($view->assetUrl('/css/clearfix.css'))
->appendStylesheet($view->assetUrl('/css/screen.css'));
$view->headScript()->appendFile($view->assetUrl('/js/jquery.1.4.3.min.js', 'text/javascript'))
->appendFile($view->assetUrl('/js/jquery.corner.js', 'text/javascript'));
And then from your layout file you call them through
echo $this->headLink()->setIndent();
echo $this->headStyle()->setIndent();
This site might also help you with bootstrap and application optimization
http://joegornick.com/2009/11/18/zend-framework-best-practices-part-1-getting-started/
In normal PHP, you would just put the common bits in another template and include it:
<?php include 'common/header_assets.php'; ?>
common/header_assets.php:
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="myjsfile1.js"></script>
<script type="text/javascript" src="myjsfile1.js"></script>
With the Zend Framework, you would want to create a layout for all of your templates to share that would have these common bits:
http://zendframework.com/manual/en/learning.quickstart.create-layout.html