I have modules for category:
+modules/
+category/
+assets/
+css/
+js/
+images/
+components/
+controllers/
+models/
+views/
-CategoryModule.php
What is the best way to includes the css and jss to all views?
Publish and register in CategoryModule init method - this will make available your css and js in category module.
Something like this:
public function init() {
$path = $this->assetManager->publish(Yii::getPathOfAlias('application.modules.category.assets'));
$this->clientScript->registerCssFile($path . '/css/some-css.css', 'screen, projection');
$this->clientScript->registerScriptFile($path . '/js/some-js.js');
}
create module layout file under views/layout and call it in module config file as
$this->layoutPath = Yii::getPathOfAlias('application.modules.moduleName.views.layouts');
$this->layout = '/layouts/layoutname';
register all the js and css file as #PeterM mentioned
Create a folder "layouts" in your views folder. Create main.php in that layouts folder.
In your , add following code:
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/cycle.js"></script>
This is your default layout. So add,
<?php echo $content; ?>
This is another method to include css and js in all views.
Easy using this static method
<?php Yii::app()->clientScript->registerCssFile(Yii::getPathOfAlias('application.modules.curriculo.assets') . '/bootstrap/datepicker/css/datepicker.css'); ?>
<?php Yii::app()->clientScript->registerScriptFile(Yii::getPathOfAlias('application.modules.curriculo.assets') . '/bootstrap/datepicker/js/bootstrap-datepicker.js'); ?>
This should help you:
http://www.yiiframework.com/wiki/249/understanding-the-view-rendering-flow/
All three sections (beginContent, container and endContent) are explained in detail.
Related
I am building a website with php and it has 20 pages. In the homepage
I would like to have a slider and some other plugins which I include them
in the head. In the footer I link also some JS files.
When we use php we have header.php and footer.php
Some of the plugins are not needed on some pages but the header.php
and footer.php is included on those pages. Is there a way to remove
those plugins on those specific pages? or I have to include everything
even if they are not needed? Also I would like to add some other plugins
in some of the pages that are not needed in the Home Page. Should I create multiple header.php and footer.php and include them when necessary?
What is the solution to this problem?
Thanks.
Example:
Home Page those are needed:
Header.php
<link rel="stylesheet" href="plugin01.css">
<link rel="stylesheet" href="plugin02.css">
<link rel="stylesheet" href="plugin03.css">
<link rel="stylesheet" href="plugin04.css">
Footer.php
<script src="plugin01.js"></script>
<script src="plugin02.js"></script>
<script src="plugin03.js"></script>
<script src="plugin04.js"></script>
Random Page:
I need only
header.php
<link rel="stylesheet" href="plugin01.css">
<link rel="stylesheet" href="plugin02.css">
footer.php
<script src="plugin01.js"></script>
<script src="plugin02.js"></script>
What you can do is create a helper function to assist with loading required assets and then have a common header.php / footer.php like this:
helpers.php
<?php
function loadStyles($assets = array()) {
foreach ($assets as $asset) {
echo '<link rel="stylesheet" href="'. $asset .'.css">'."\r\n";
}
}
function loadScripts($assets = array()) {
foreach ($assets as $asset) {
echo '<script src="'. $asset .'.js"></script>'."\r\n";
}
}
?>
Then, update your header.php like this:
<?php
// Load required stylehseets for this page
if (isset($styleAssets)) {
loadStyles($styleAssets);
}
// Rest of your common header stuff here
?>
Then do something similar with footer.php like this:
<?php
// Load required scripts for this page
if (isset($scriptAssets)) {
loadScripts($scriptAssets);
}
// Rest of your common footer stuff here
?>
Then you put it all together like this. For example, this is your "home.php" page:
<?php
// Load helpers
require 'helpers.php'
// Define required styles for this page
$styleAssets = array(
'plugin01',
'plugin02',
'plugin03',
'plugin04'
);
// Load header
require 'header.php'
// Rest of the "home" page code goes here
// Define required scripts for this page
$scriptAssets = array(
'plugin01',
'plugin02',
'plugin03',
'plugin04'
);
// Load footer
require 'footer.php'
?>
Now, for another random.php page, you simply re-use the script like this:
<?php
// Load helpers
require 'helpers.php'
// Define required styles for this page
$styleAssets = array(
'plugin01',
'plugin02'
);
// Load header
require 'header.php'
// Rest of the "random" page code goes here
// Define required scripts for this page
$scriptAssets = array(
'plugin01',
'plugin02'
);
// Load footer
require 'footer.php'
?>
You'll have to define for each page its required plugins (resources).
In the header and footer files, simply loop through that array and call the resources.
It's a bit more work but it's a better organised method and in case you'll have in the future a new page with other plugins, instead of writing patched, you'll easily update it using this mechanism.
PageX.php
//$this_page = 'pageX';
$plugins = array(
'css' => array(
'pluginName1' => 'plugin-name-1.css',
'pluginName2' => 'plugin-name-2.css',
),
'js' => array(
'pluginName1' => 'plugin-name-1.js'
)
);
require_once 'header.php;
//....
//...
require_once 'footer.php';
Header.php
foreach($plugins['css'] as $name => $resource_url){
echo '<link rel="stylesheet" href="'.$resource_url.'">';
}
Footer.php
foreach($plugins['js'] as $name => $resource_url){
echo '<script src="'.$resource_url.'"></script>';
}
In your Header.php you can check for the current page.
if( basename($_SERVER['PHP_SELF']) == 'homepage.php')
{ ?>
<link rel="stylesheet" href="plugin01.css">
<link rel="stylesheet" href="plugin02.css">
<link rel="stylesheet" href="plugin03.css">
<link rel="stylesheet" href="plugin04.css">
<?php
}
I am trying toinclude css file in the following code.
Config :
$config['base_url'] = 'http://localhost/ASOFT/Projects/CI_search';
$config['site_url'] = 'http://localhost/ASOFT/Projects/CI_search/index.php';
$config['js'] = 'assets/js';
View:
<link rel="stylesheet" href="<?php echo $base?>/<?php echo $css?>/style.css">
<link rel="stylesheet" href="<?php echo $base?>/<?php echo $css?>/bootstrap.min.css">
<script src="<?php echo $base?>/<?php echo $js?>/jquery.min.js"></script>
<script src="<?php echo $base?>/<?php echo $js?>/jquery.js"></script>
<script src="<?php echo $base?>/<?php echo $js?>/bootstrap.min.js"></script>
I put the css file in CI_search/css and js file in CI_search/assets/js
I got the error undefined variable css and undefined variable js.Please provide solution for this problem.
UPDATE
Controller:
public function index() {
$this->data = array(
'site' => $this->config->item('site_url'),
'base' => $this->config->item('base_url'),
'css' => $this->config->item('css'),
'js' => $this->config->item('js'),
'image'=>$this->config->item('image')
);
$data = $this->data;
$data['error'] = '';
$this->load->view('index',$data);
}
As far as i can see, you din't declared $config['css'] in your config file, so it's normal to get undefined variable error for css. But you shouldn't have problem with js.
When declaring your base_url use trailing slash at the end (eg. "http://localhost/fancysite/")
Also you can use CI's url helper to use functions like base_url() or site_url() and many more. (as #Likee suggested).
config.php
// this should be the first variable in CI's config.php
$config['base_url'] = "http://localhost/ASOFT/Projects/CI_search/";
// many more lines with other configuration variables
// ..................................................
// ..................................................
// ..................................................
// your own configuration variables at the end of file
$config['css'] = 'css/';
$config['js'] = 'assets/css/';
$config['image'] = 'images/';
controller
public function index() {
// loading url helper to use base_url() function in the view,
// if you load this helper in autoload.php you don't need to load it here again
$this->load->helper('url');
// if you didn't declare data as class property
// you can simply use
// $data = array(
// 'css' => $this->config->item('css'),
// 'js' => $this->config->item('js'),
// 'image'=>$this->config->item('image')
// );
$this->data = array(
'css' => $this->config->item('css'),
'js' => $this->config->item('js'),
'image'=>$this->config->item('image')
);
// you really don't need the line below
// $data = $this->data;
$this->data['error'] = '';
$this->load->view('index',$this->data);
}
view
<link rel="stylesheet" href="<?php echo base_url($css . 'style.css'); ?>">
<link rel="stylesheet" href="<?php echo base_url($css . 'bootstrap.min.css'); ?>">
<script src="<?php echo base_url($js . 'jquery.min.js'); ?>"></script>
<!-- do you really need to include jquery.js while you included jquery.min.js above? but here we go :) -->
<script src="<?php echo base_url($js . 'jquery.js'); ?>"></script>
<script src="<?php echo base_url($js . 'bootstrap.min.js'); ?>"></script>
Probably you will need to use url helper a lot. So you can autoload it in autoload.php file in config folder. it must be somewhere around line 90
$autoload['helper'] = array('url');
There are many ways to include css and js file in codeigniter.
This how I do it.
FIRST: Create a folder outside the application folder and named it any named you liked but I prefer to named it as resources. Create a sub folders like js, css, images and others. Place all your files in here for future references.
SECOND: Open the the contants.php saved in application/config and paste this code.
define('CSS', 'http://localhost/yourfolder/resources/css');
define('JS', 'http://localhost/yourfolder/resources/js');
define('IMAGES', 'http://localhost/yourfolder/resources/images');
NOTE: Update this code depends on your needs.
THIRD: On your view file, you can access this files by,
<link rel="stylesheet" href="<?php echo(CSS.'bootstrap.min.css'); ?>">
<script type="text/javascript" src='<?php echo(CSS.'bootstrap.min.css'); ?>'></script>
Refer to this link. How can I include the CSS file in CodeIgniter?
I hope this helped.
Bind your variables to view like this:
$this->load->view('viewName', $config);
And array $config should be available in your controller method.
Instead setting $config['base_url'] you can use function base_url().
well if at all possible determine what your path structure will be and then just use it in the view with base_url() .
<link href="<?php echo base_url();?>assets/css/bootstrap.min.css" rel="stylesheet">
<script src="<?php echo base_url();?>assets/js/blahblah.js"></script>
you can even have a few simple templates, and then call the appropriate template.
if that is impossible - then push this logic and output to a model or similar so that it can be called by different controllers. otherwise you are going to have to update folder names and file paths in your controllers.
My idea is to use template parameter in joomla to set the color for a background, text or buttons.
I want to define a css class instead of each time using style="background-color:<?php echo $buttoncolor ?>;" as I don't want to write countless template overrides.
I believe that could be very usefull feature.
The parameter in my templateDetails.xml looks like
<field name="buttoncolor" type="color" default="#309000"
label="TPL_BUTTON_COLOR_LABEL"
description="TPL_BUTTON_COLOR_DESC" />
The idea how to use php variable in css I found on CSS-Tricks
To use a php variable within a css I linked to this file in my index.php
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/style.php" type="text/css" />
My style.php looks like:
<?php
header("Content-type: text/css; charset: UTF-8");
$buttoncolor = $this->params->get("buttoncolor");
?>
.buttoncolor {background-color: <?php echo $this->params->get('buttoncolor'); ?>;}
Usally I set a variable to a template parameter in the index.php like
<?php
//parameter
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$params = $app->getParams();
$buttoncolor = $this->params->get('buttoncolor');
?>
Unfortunately I got the following error:
Fatal error: Using $this when not in object context in style.php
Any ideas, workaround and help is highly appreciated!
Please try to remove $this. Your code has to be:
$app = JFactory::getApplication();
$template = $app->getTemplate(true);
$params = $template->params;
$buttoncolor = $params->get("buttoncolor");
Joomla has a specific way to set css style. You have to do it like:
$document = JFactory::getDocument();
$style = ".buttoncolor {background-color: ".$buttoncolor."}";
$document->addStyleDeclaration($style);
Good Luck!
I am using zend. When i use below code,
<?= $this->headLink()
->appendStylesheet(BASE_URL . 'css/css.css');
?>
This outputs like below with out close element.
<link href="/ecomos3/css/css.css" media="screen" rel="stylesheet" type="text/css" >
so this one fails in w3 validation and getting "end tag for "link" omitted, but OMITTAG NO was specified"
i want the link tag should be
<link href="/ecomos3/css/css.css" media="screen" rel="stylesheet" type="text/css" />
How can i do it in zend ? Kindly advice on this.
You need to specify the docType using the doctype helper
You can do it in your bootstrap if you wish:-
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
protected function _initDoctype()
{
$this->bootstrap('view');
$view = $this->getResource('view');
$view->doctype('XHTML1_STRICT');
}
}
Or add this line to your config.ini file:-
resources.view.doctype = "XHTML1_STRICT"
I'm trying to load the google maps API ie:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
in my head template. But because I've only got one page with a google map on it (I'd rather not have the API load for all files), how would I send the message from the controller through to the view that I wish to load this particular JS file?
Thanks for your help.
CodeIgniter has a segments class. You would be able to run some code like:
<?php if($this->uri->segment(1) == 'map') { ?>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
<?php } ?>
When on page http://yoursite.com/map/ it will load the script.
One solution is to either use a template library that has javascript/css "injection" - see:
http://williamsconcepts.com/ci/codeigniter/libraries/template/reference.html#utilities
$this->template->add_js('js/jquery.js');
$this->template->add_js('alert("Hello!");', 'embed');
for more information.
If you don't want to use a template library, do something like this:
*assuming on the "Map" controller, and that you need the JS file on the default page.
class Map extends CI_Controller {
function __construct()
{
parent::__construct();
}
function index()
{
$scripts = array(
'<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">' . "\n",
'<script>something</script>');
/* this method lets you add multiple...*/
$data['scripts'] = $scripts;
$this->load->view('my_map/index', $data);
}
}
in your view:
if(isset($scripts))
{
foreach($scripts as $script)
{
echo $script;
}
}
essentially you build an array of script files/css files (whatever), then check for its prescence and dump it in the head section of your view.
I'd personally go for the template option.
Also note CI2.0 has a new javascript driver might be worth a read
<?php
/**
* Head files loader
* #author azhar
**/
function headscripts($path)
{
if(is_string($path))
{
echo "<script type='text/javascript' src='". base_url($path) ."'></script>\n";
}elseif(is_array ($path)){
foreach ($path as $p) {
echo "<script type='text/javascript' src='". base_url($p) ."'></script>\n";
}
}
}
function headlinks($path)
{
if(is_string($path))
{
echo "<link rel='stylesheet' href='". base_url($path) ."'/>\n";
}elseif(is_array ($path)){
foreach ($path as $p) {
echo "<link rel='stylesheet' href='". base_url($p) ."'/>\n";
}
}
}
?>
Add this file in your helper_directory under the name head_helper. In your controller inside an action use this code
$data['headscripts'] = array('js/main.js');
And in your view file use this function
headscripts($headscripts);
For stylesheet use this
headlinks($headlinks);
And yes do not forget to load the helper using autoload.php file in config folder like this
$autoload['helper'] = array('url', 'file','head');
Thanks for your answers guys, I ended up doing a mixture of Ross and leaf dev's suggestions before I found your answers here, so I guess I was on the right track.
My controller has:
$data['head'] = array('specificjs');
$this->load->view('view',$data);`
and my view has:
if(isset($head)){
foreach($head as $item){
$this->load->view('js/'.$item);
}
}
and my 'specificjs' view has what's required.
This way I can load as many custom scripts as I want and have the code in a view not a controller.
Thanks again, but keep any further suggestions coming!
write a helper for this. Pass the scripts names in an array and inside the helper function iterate over them and print the scripts