I am a newbie in codeigniter. I want to load jquery on every page. I know we have to use autoload.php. But inside it there is section where static contents like js or css can be included. How to do this? I created another index like this
$autoload['static'] = array(JS_LIBS_PATH.'/jq.js');
But obviously nothing happened. That constant has been defined in config,php. Using same constant I could put jq on a page, but what about autoload ?
I can think of several elaborate solutions but I really think that javascript is presentation-level and shouldn't be in your autoload, models, controllers, etc.
You can just use a master view file of some kind with your <head> and basic HTML requirements:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php echo $title; ?></title>
<script src="/path/to/jquery.js"></script> <!-- jQuery on every page -->
<!-- alternatively, loop through files in a custom config setting -->
<?php foreach (config_item('default_js') as $src): ?>
<script src="<?php echo $src; ?>"></script
<?php endforeach; ?>
<!-- ... and/or loop through files set in a controller -->
<?php foreach ($js_files as $src): ?>
<script src="<?php echo $src; ?>"></script
<?php endforeach; ?>
</head>
<body>
<header />
<?php echo $content; ?>
<footer />
</body>
</html>
Then just load views like this:
$data['js_files'] = array('draggable.js', 'widgets.js');
$content = $this->load->view('index', $data, TRUE);
$this->load->view('master', array('title' => 'Home', 'content' => $content));
Of course this is just one solution out of millions, but the idea of Codeigniter "autoloading" CSS and Javascript makes no sense, you have to "load" it yourself in one way or another - how you do it is completely up to you.
Here's what I've done for a while that works quite well.
Your asset files (javascripts, stylesheets, etc) go in your asset folders /assets/js, /assets/css and so forth.
In your config file, you define a default array of JavaScript files to load.
$config['default_asset_js'] = array('js/jquery.js', 'js/jquery-ui.js');
In your views, you have a section that runs through that array and outputs each of them.
foreach($this->config-item('default_asset_js') as $file_name)
{
echo '<script src="' . base_url('assets/' . $file_name) . '"></script>';
}
You can probably also get creative and add to that array in your controller, if you have specific pages that require additional files to be loaded.
In CI, Helpers, as the name suggests, help you with tasks. So we can load jquery automatically as a helper.
Put the jquery file in some place: /var/www/html/ci3/assets/js/jquery-2.1.4.min.js
Create a file /var/www/html/ci3/application/helpers/jquery_helper.php (you need use the _helper.php sufix).
Inside the jquery_helper.php file call the jquery-2.1.4.min.js file:
<script src="assets/js/jquery-2.1.4.min.js"></script>
Inside /var/www/html/ci3/application/config/autoload.php call the jquery_helper.php:
$autoload['helper'] = array('jquery');
Now the jquery will be load automatically and you can use it in all your views.
Related
I'm new to PHP (3 days) and I understand the basic concept of using includes for creating high level templates. I'd like to further utilize this tool to load more granular content, but I'm not sure how to approach this. The html below is an example of a page template put together with php includes. If you reference this html, let's say I have a widget on the page contained here: <?php include('include/WIDGET.php'); ?>. In the simplest of scenarios, there would be a link above the widget that reads "Widget 2". On click of this link, I would want the WIDGET.php content to be replaced with widget2.php. How can I manipulate the include to load widget2.php?
HTML
<!-- File: index.php -->
<html>
<head>
<?php include('include/head.php');?>
<title><?php echo $siteName;?></title>
</head>
<body>
<?php include('include/header.php'); ?>
<!-- CONTENT -->
<?php include('include/WIDGET.php'); ?>
<?php include('include/main-content.php'); ?>
<!-- CONTENT END -->
<?php include('include/footer.php'); ?>
</body>
</html>
To change what file(s) is included, you would need to provide some sort of parameter to the page, that can conditionally include the correct widget.
For example, including it in URL query string, such as:
http://yoursite/index.php?content=widget2
Then, in your PHP file, you can get this value:
if (isset($_GET['content']) && !empty($_GET['content'])) {
$widget = $_GET['content'];
} else {
$widget = 'widget';
}
And include it in your HTML:
[...]
<!-- CONTENT -->
<?php include('include/' . $widget . '.php'); ?>
[...]
This is just to give you an example of the logic involved, but I wouldn't use the code as I've provided it as it is incredibly insecure, and doesn't check the existence of files, etc.
I know you're just getting started, and it's a lot to take in at once, but you might want to consider using a PHP framework such as Zend or Symfony, or CakePHP to take advantage of some routing and templating solutions that have already been set up for you.
I started to learn CakePHP a few days ago, following their blog tutorial.
Now I am in the process of writing a small project for myself to get familiar with the framework.
Having studied their documentation, I noticed there are two ways to include CSS files.
One way is to echo the link tag(s) using the HtmlHelper: echo $this->Html->css(array('style', 'forms', 'modal'));. That type of linking is referred to as 'inline style' according to the options array.
The other method is to add the tags to the (I believe default?) CSS block and then print that block inside the <head>:
echo $this->Html->css(array('style', 'forms', 'modal'), array('inline' => false));
echo $this->fetch('css');
What are the advantages of using one way over the other?
Consider the following layout file:
...
<head>
...
<?= $this->Html->css('main.css'); ?>
<?= $this->fetch('css'); ?>
...
</head>
...
The simplest way
By default the rendered view would contain:
...
<head>
...
<link rel="stylesheet" type="text/css" href="/css/main.css" />
</head>
If there is no logic associated with whether a css file should be added - it's appropriate to simply edit the layout file and add the css file, ignoring the inline property.
Advantage: It's simple, clear and obvious what's happening
The Dynamic way
If however there is logic associated with whether a particular css file should be included - this is where the inline property becomes useful.
Consider the following view file:
<?php
if ($something) {
$this->Html->css('maps.css', ['inline' => false]);
echo $this->element('maps');
}
?>
View contents
Or a plugin which includes the following helper:
<?php
class AwesomeHelper extends AppHelper {
public function beforeLayout() {
$this->Html->css('awesome.css', ['inline' => false]);
$this->Html->js('awesome.js', ['inline' => false]); // also applies to js files
}
}
In these cases without using the inline property or editing the layout file, it's not possible to add the css files to the head of the rendered output. However by using the inline property, it is possible to build up the css files required for the final view.
Advantage: Code outside the layout file can add required css files to the output in the head.
I'm looking for ways to have my pages search for the page layout from an external template page. Please see the below example.
<head>
<title></title>
</head>
<body>
<search for header, css, layout, etc from external page>
Page contents
<search for footer>
</body>
Is there any way to do this using PHP or HTML? I want to be able to edit the layout for all the pages without having to do it page by page. I welcome any other means to achieve the same effect as long as it works on all the browsers.
Thank you very much!
This is exactly the sort of thing that PHP is for. A PHP script can include the contents of another script using the include statement.
So each page in your application could have an associated PHP script that generates the contents, and includes footer.php for the footer layout. In this way, when you change footer.php all the pages that use it will automatically get the changes.
You can't do this with pure HTML, though you could with some javascript and Ajax.
Like Andrew said, use includes. I'll set up 2 basic examples.
The simplest, have multiple layout files that are called by your main file(s):
header.php:
<div id="header">
Menu can go here.
<?php echo 'I make all my files .php, so they can use PHP functions if needed.'; ?>
</div>
footer.php
<div id="footer">
Footer Link
</div>
index.php
<html>
<head></head>
<body>
<?php include('/path/to/header.php'); ?>
Specific index.php content here.
<?php include('/path/to/footer.php'); ?>
</body>
</html>
The other option is to have one PHP file which includes all your different layout elements in functions. The reason I like this, is because you can include one file and then call specific functions for different parts. This can also be used to pass variables like a title of a page.
layout.php
<?php
function makeHeader($title) {
return 'My title is: '.$title;
}
function makeFooter() {
$html = '
<div id="footer">
Footer Link
</div>
';
return $html;
}
?>
index.php
<?php include('/path/to/include.php'); ?>
<html>
<head></head>
<body>
<?php echo makeHeader('Page Title'); ?>
Specific index.php content here.
<?php echo makeFooter(); ?>
</body>
</html>
Just make sure you use relative paths (no http://www.) when including files. This will allow variables and functions to transfer over smoothly. The easiest way to do this is using the PHP variable $_SERVER['DOCUMENT_ROOT'] so if you have a file http://mysite.com/includes/layout.php, you could include it with include($_SERVER['DOCUMENT_ROOT'].'/includes/layout.php') no matter where your file you are including from is located.
I want to include external js file in my php script. I am following zend framework.Right now I am adding js file in controller's init function like this.
public function init() {
$this->doUserAuthorisation();
parent::init();
$this->view->headScript()->appendFile($this->view->baseUrl().'/js/front_cal/jquery-1.3.2.min.js');
$this->view->headLink()->setStylesheet($this->view->baseUrl().'/styles/front_cal/calendar.css');
}
problem what i am facing is, js file doesnot include.Is this the right way to include js file?
JavaScript (and images, CSS, flash movies, etc) belong to the view layer so configure them there.
For globally included files, add them to your layout, eg
<!-- layout.phtml -->
<head>
<?php echo $this->headScript()->prependFile(
$this->baseUrl('path/to/file.js')) ?>
<?php echo $this->headLink()->prependStylesheet(
$this->baseUrl('path/to/file.css')) ?>
<!-- snip -->
<?php echo $this->inlineScript()->prependFile(
'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js') ?>
</body>
Your view scripts can then add assets to the helpers which are echoed out in the layout. As the layout uses the prepend*() methods, the global files will be displayed first, eg
<?php // views/scripts/index/index.phtml
$this->inlineScript()->appendFile($this->baseUrl('path/to/script.js'));
In above solution the 'path/to/file.js' script will be included in the header twice. There is no need for echo before calling prependFile. Such behaviour can lead to duplicating javascript controls.
<!-- layout.phtml -->
<head>
<?php echo $this->headScript()->prependFile(
$this->baseUrl('path/to/file.js')) // this will echo out the whole prependFile queue
I am new to Cake PHP and I had a website with regular PHP and HTML, but now I am switinching to use Cake PHP. The issue I am having is that it is not picking up the javascript for a slider I have on a menu. (But it works on the original web).
So I did the following steps, maybe you can see where I am making my mistake.
First I put the Javascript file under webroot/js
FILE javascript.js
/**
*
*/
$(document).ready(function() {
//ACCORDION BUTTON ACTION
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
//HIDE THE DIVS ON PAGE LOAD
$("div.accordionContent").hide();
});
Then I went to AppController and added the following line under cake/libs/controller/app_Controller
class AppController extends Controller {
var $helpers = array('Html', 'Form', 'Javascript');
}
Then, that change allowd me to add it to layout
FILE mylayout.ctp
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<?php
$javascript->link('javascript.js');
</head>
<?php include 'menu_nav.php';?> //this has starting <body> tag
<?php include 'leftmenu_nav.php';?>
<div id="content" class="divContent">
<div id="mainContent" class="divMainContent" style="text-align: left;">
<?php echo $content_for_layout; ?>
</div>
</div>
<?php include 'footer.php';?> //this had end </body> tag
</html>
Now somewhere in the
$content_for_layout
there some <divs> that make use of the JS, but for some reason 1) I do not see the JS markup when i do page source and 2) It is not sliding like it used to..
Can anyone please tell me what I may be missing in this CakePHP config?.
Thank you
echo $this->Html->script('javascript.js');
echo $this->Html->script('jquery-ui-1.8.16.custom.min.js');
echo $this->Html->script('jquery.js');
echo $this->Html->script('jquery.MetaData.js');
echo $this->Html->script('jquery.min.js');
echo $this->Html->script('jquery.rating.js');
echo $this->Html->script('jquery.rating.pack.js');
echo $this->Html->script('jquery.validate.js');
echo $this->Html->script('paging.js');
echo $this->Html->script('ui.datetimepicker.js');
echo $this->Html->script('format.js');
There are a couple of things you need to check.
First, don't change anything in the cake folder. That is a big no no. If you want to have an app controller, simply create a new file name app_controller.php and put it in your /app folder. Add the following code in it.
class AppController extends Controller {
var $helpers = array('Html', 'Form', 'Javascript'); //what version are you using?
}
How you include the JS file depends on what version of cake your are using. The newer version uses the following syntax
<?php echo $this->Html->script('script'); ?>
http://book.cakephp.org/view/1589/script (1.3)
Next, make sure that all the JS is actually being included. Look at the source and click through to the JS file to confirm that the file is loaded. I don't see a jquery include anywhere so you should confirm that jquery is included in your layout.
After that, confirm that the div.accordionButton div is contained in your view. Since it doesn't look like it's in the layout, open up the specific view element and check in there.
As a last resort, add alert($('div.accordionButton').length) in your JS file to confirm that the JS is actually picking up the DIV from the view. If the alert shows 0, then this means that it's not.
You'll want to use this format instead, I insert it in my layout.ctp.
echo $this->Html->script('jquery.min.flip.js');
I think there are different ways of calling js files, but I keep them in /app/webroot/js and use this call to load the file.