I've got some scripts I'd like to add to the end of the <body> of the page, and some that I need to have in the <head>. I'm wondering if there's a more elegant way to add certain scripts to the <head> and certain in the <body> using a segment or something like that. Say I have two scripts that are going to go in the body:
$this->view->headScript()->prependFile($assetUrl . "/js/jquery.min.js");
$this->view->headScript()->appendFile($assetUrl . "/js/application.js");
And I want this one in the <head> instead:
$this->view->headScript()->prependFile($assetUrl . "/js/modernizr.min.js");
Calling $this->headScript(); outputs all three in both cases. Is there a way to group scripts? I could just paste the HTML snippet manually, but I'd like to have it in code because I switch to minified versions of the javascript if the site is running in the production environment.
I'd make my own helper called htmlScript. You should be able to extend the existing headScript helper, overriding the registry key property only.
Then just echo out your helper in your layout at the end of the document
<?php echo $this->htmlScript() ?>
Edit Been out of the loop for too long ;)
There's already a helper for you - Zend_View_Helper_InlineScript
If you want to override the script files:
$this->view->headScript()->setFile()
EDIT I'm not sure why I got downvoted. I gave an alternative answer to your question, albeit succinctly. If you have prepended/appended two script files, but for a specific controller or module you wish to override the loading of those scripts with a third, then setFile should do exactly what you asked.
Related
Can anyone tell me what is the difference between including the js script file in the following two ways,
I made this inside system plugin in joomla and included the js file inside "onAfterInitialise" function.
1)
<script type="text/javascript" src="<?php echo JURI::base(); ?>/plugins/system/test/script/script.js"></script>
This works fine and including the js file correctly, But when I logged-in from the backend the font size from userlisting and listing from other extensions gets enlarged.This is not the issue in my js script.
2)
$document->addScript(JURI::root(). "plugins/system/test/script/script.js");
This works fine without any issues.
Can anyone explain what goes behind this.
Using the second method is simply using Joomla coding standards and adds your script in between the <head> tags.
There isn't much difference except for where the script gets imported on the page.
JURI::base() and JURI::root() are both the same. They both define the root folder for your Joomla site. If you are unsure which one to use, I would recommend using method 2, as it's always good to get used to Joomla coding standards.
You can see the source of addScript() :) Basicly, if you use first method, your srcipt will be added in the same place you wrote the code. Second method will add link to a inner table in $document and will be 'rendered' at the
<head></head>
section at the end of page processing.
each one of my pages shares the common.css stylesheet but then nearly every other page has its own custom stylesheet and this is the same for javascript files.
My main template file is in this sort of format (obviously the real one has more html in it):
<html>
<head>
<title><?php echo $this->data['title']; ?></title>
</head>
<body>
<?php echo $this->data['content']; ?>
</body>
I was thinking of doing it this way:
When I create the view object in the controller I could add the required files (in an array) to the view object so then they could be accessed in the main template like $this->data['css'] and $this->data['javascript'] and I could loop through the arrays in the main template to output them in the <head> of the page.
Is this an okay way to do it or is it breaking some rules or bad practice? Thanks.
It is totally okay, though I advice you to write yourself a asset() method in order to prepend your basepath before filename [e.g. http://yoursite.com/web/] so your code is more portable an deploying is easier.
As Fluffeh said consider compressing your whole styles in a single file for better performance - check YUI compressor for example.
If I have 10 images, 2 javascript files, and 4 css files that need to be included inside a Ci view... How is the best way to call all the files? I've tried calling all the external files using $this->load->view('image1.png') and $this->load->view('style.css'). But it doesn't seem to work properly. Any ideas on how to better approach this problem?
You're not using the view method correctly there.
You typically assign one view and pass things like js and css to the template. This can vary depending on how you use the framework.
$this->load->view('path-to-view'); will look for a view in the view folder and not an arbitrary file.
You might look into this:
http://codeigniter.com/user_guide/helpers/html_helper.html#img
for loading images, though I personally think it's pointless to call a framework's method for a basic html element like an image.
There are cases when you would use multiple views, like views to be returned as strings - loops and such may need these - but that doesn't look like the case in your question.
Just in case though here's the view docs:
http://codeigniter.com/user_guide/general/views.html
To elaborate further, the general idea is to use the CI controller to handle the data for your page, pass the necessary template data to the template (like your js and css specific to this page) then assign the necessary data to the view and pass that view to the template. You may be wondering what I mean by template too, since out of box CI loads views progressively if you just call them sequentially.
in your controller you may pass the view an array of header info:
$data['css'] = array('some-path.css','another-path.css');
$this->load->view('your-view', $data);
so in your view that handles the header you might call something like this:
<head>
<?php foreach($css AS $c): ?>
<link rel="stylesheet" type="text/css" href="<?php echo $c; ?>">
<?php endforeach; ?>
</head>
Here's a fair link to CI templates:
How to Deal With Codeigniter Templates?
It's a versatile framework with many options for using it however you are most comfortable.
Am sure the question is vague.
Let me try to explain.
Assume zend frame work - PHP - jquery combination.
I include jquery files in layout.phtml.
i include some files in controller.php.
some file in view.phtml
Atlast when i run and view the page . Is there any way or any tool to find which file is included through which file (layout controller or view) ??
In addition can some one explain which is the best way include js files and where . using zend framework in layout or controller or view
The only way to find where a public, static asset (JS, CSS, image, etc) is included is to trawl through the source code (using something that can "find in files" would save time).
In regards to how and where to include such assets... for global includes (common stylesheets, scripts, etc), include these in your layouts.
For specific page includes, place these in your views.
The best way to include a static asset is using the appropriate view helper. These are generally displayed in your layout file, for example
<?php echo $this->doctype() ?>
<html>
<head>
<?php
echo $this->headMeta()->prependHttpEquiv('Content-Type', 'text/html; charset=' . $this->getEncoding());
// I use "prepend" here so it comes before any page specific stylesheets
echo $this->headLink()->prependStylesheet($this->baseUrl('/css/common.css'));
echo $this->headScript();
?>
</head>
<body>
<!-- content -->
<?php echo $this->inlineScript() ?>
</body>
</html>
You can then add to these placeholders in your view scripts, for example
<?php
// index/index.phtml
$this->inlineScript()->appendFile('https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js')
->appendFile($this->baseUrl('/js/my-jquery-script.js'));
To "include" a file means very different things in PHP (where it is analogous to copying and pasting source code from another file into the current file) and HTML/JavaScript (where you are referencing another file, which the browser must make a separate HTTP request to download). What do you consider "including"? Are image tags "including" the images? At least we can easily count those references by examining HTTP requests; from the client side, it's impossible to tell what include()s went into the source code behind the rendered output. Even naive source code searching couldn't tell you thanks to autoloading. As is, your question is not well enough defined to provide a clear answer.
Controversal answer:
You don't need that.
If you need that then it's something wrong with the way your designed your application.
Note: I've learned (trial and error) that 90% of things I don't know how to do and that seem to be impossible in ZF are a result of wrong application design.
Most HTML in a large website is duplicated across pages (the header, footer, navigation menus, etc.). How do you design your code so that all this duplicate HTML is not actually duplicated in your code? For example, if I want to change my navigation links from a <ul> to a <ol>, I'd like to make that change in just one file.
Here's how I've seen one particular codebase handle this problem. The code for every page looks like this:
print_top_html();
/* all the code/HTML for this particular page */
print_bottom_html();
But I feel uncomfortable with this approach (partially because opening tags aren't in the same file as their closing tags).
Is there a better way?
I mostly work with PHP sites, but I'd be interested in hearing solutions for other languages (I'm not sure if this question is language-agnostic).
I'm not a php programmer, but I know we can use a templating system called Smarty that it works with templates(views), something like asp.net mvc does with Razor.
look here http://www.smarty.net/
One solution at least in the case of PHP (and other programming languages) is templates. Instead of having two functions like you have above it would instead be a mix of HTML and PHP like this.
<html>
<head>
<title><?php print $page_title ?></title>
<?php print $styles ?>
<?php print $scripts ?>
</head>
<body>
<div id="nav">
<?php print $nav ?>
</div>
<div id="content">
<?php print $content ?>
</div>
</body>
</html>
Each variable within this template would contain HTML that was produced by another template, HTML produced by a function, or also content from a database. There are a number of PHP template engines which operate in more or less this manner.
You create a template for HTML that you would generally use over and over again. Then to use it would be something like this.
<?php
$vars['nav'] = _generate_nav();
$vars['content'] = "This is the page content."
extract($vars); // Extracts variables from an array, see php.net docs
include 'page_template.php'; // Or whatever you want to name your template
It's a pretty flexible way of doing things and one which a lot of frameworks and content management systems use.
Here's a really, really simplified version of a common method.
layout.php
<html>
<body>
<?php echo $content; ?>
</body>
</html>
Then
whatever_page.php
<?php
$content = "Hello World";
include( 'layout.php' );
Sounds like you need to use include() or require()
<?php
include("header.inc.php");
output html code for page
include("footer.inc.php");
?>
The header and footer files can hold all the common HTML for the site.
You asked for how other languages handle this, and I didn't see anything other than PHP, so I encourage you to check out Rails. Rails convention is elegant, and reflects #codeincarnate 's version in PHP.
In the MVC framework, the current view is rendered inside of a controller-specific layout file that encapsulates the current method's corresponding view. It uses a "yield" method to identify a section where view content should be inserted. A common layout file looks like this:
<html>
<head>
<% #stylesheet and js includes %>
<body>
<div id="header">Header content, menus, etc…</div>
<%= yield %>
<div id="footer">Footer content</div>
</body>
</html>
This enables the application to have a different look and feel or different navigation based on the controller. In practice, I haven't used different layout files for each controller, but instead rely on the default layout, which is named "application".
However, let's say you had a company website, with separate controllers for "information", "blog", and "admin". You could then change the navigation for each in a clean and unobtrusive manner by handling the different layout views in their respective layout files that correspond to their controllers.
You can always set a custom layout in the controller method by stating:
render :layout => 'custom_layout'
There are also great helper methods built into Rails so you don't have to rely on $global variables in PHP to ensure your CSS and Javascript paths are correct depending on your development environment (dev, staging, prod…). The most common are:
#looks in public/stylesheets and assumes it's a css file
stylesheet_link_tag "filename_without_extension"
#looks in public/javascripts and assumes it's a js file
javascript_include_tag "jquery"
Of course, each of these sections could be expounded upon in much greater detail and this is just brushing the surface. Check out the following for more detail:
http://guides.rubyonrails.org/layouts_and_rendering.html
What you suggested works OK. As long as print_top_html and print_bottom_html stay in sync (and you can use automated tests to check this), then you never need to worry about them again, leaving you to focus on the real content of the site -- the stuff in the middle.
Alternatively, you can combine print_top_html and print_bottom_html into a single call, and send it HTML code (or a callback) to place in the middle.
I use the partials system of Zend_View (very similar to Rails). A partial is essentially a small HTML template that has its own variable scope. It can be called from inside views like:
<?php echo $this->partial('my_partial.phtml', array( 'var1' => $myvar ));
The variables that get passed into the construct get bound to local variables inside the partial itself. Very handy for re-use.
You can also render a partial from inside normal code, if you're writing a helper object where you have more complex logic than you'd normally feel comfortable putting in a view.
public function helperFunction()
{
// complex logic here
$html = $this->getView()->partial('my_partial.phtml', array('var1' => $myvar ));
return $html;
}
Then in your view
<?php echo $this->myHelper()->helperFunction(); ?>