Include CSS javascript file in Yii Framework

Question

How to include a Javascript or CSS file in Yii Framework   I want to create a page on my site that has a little Javascript application running  so I want to include  js and  css files in a specific view

User · Answer

In Yii Assets are declared in engine assets Appassets php This make more easier to manage all your css and js files

User · Answer

I liked to answer this question   Their are many places where we have css  amp  javascript files  like in css folder which is outside the protected folder  css  amp  js files of extension  amp  widgets which we need to include externally sometime when use ajax a lot  js  amp  css files of core framework which also we need to include externally sometime  So their are some ways to do this   Include core js files of framework like jquery js  jquery ui js   lt  php  Yii  app  - gt clientScript- gt registerCoreScript  jquery         Yii  app  - gt clientScript- gt registerCoreScript  jquery ui       gt    Include files from css folder outside of protected folder    lt  php  Yii  app  - gt clientScript- gt registerCssFile Yii  app  - gt baseUrl   css example css    Yii  app  - gt clientScript- gt registerScriptFile Yii  app  - gt baseUrl   css example js      gt    Include css  amp  js files from extension or widgets   Here fancybox is an extension which is placed under protected folder  Files we including has path    protected extensions fancybox assets    lt  php    Fancybox stuff   assetUrl   Yii  app  - gt getAssetManager  - gt publish Yii  getPathOfAlias  ext fancybox assets     Yii  app  - gt clientScript- gt registerScriptFile  assetUrl   jquery fancybox-1 3 4 pack js     Yii  app  - gt clientScript- gt registerScriptFile  assetUrl   jquery mousewheel-3 0 4 pack js       gt      Also we can include core framework files  Example   I am including CListView js file    lt  php  baseScriptUrl Yii  app  - gt getAssetManager  - gt publish Yii  getPathOfAlias  zii widgets assets     Yii  app  - gt clientScript- gt registerScriptFile  baseScriptUrl   listview jquery yiilistview js  CClientScript  POS END       gt     We need to include js files of zii widgets or extension externally sometimes when we use them in rendered view which are received from ajax call  because loading each time new ajax file create conflict in calling js functions    For more detail Look at my blog article

User · Answer

here is a good solution to use CDN and offline scripts  I use this code in every application I build  so you can use this in any app   Included Scripts    main css main js jQuery jQuery   CD Bootstrap 3 1 Bootstrap 3 1   CDN Fancybox 2 Fancybox 2   CDN FontAwesome 4 FontAwesome 4   CDN Google Analytics Script   STEP1    put this code in config main php           params   gt array               cdn   gt true     or false       STEP2   create resoreses folder in root app folder and put your script there  res  --js --css --img --lib --style      STEP3   put this code in components controller php  public function registerDefaults           cs   Yii  app  - gt clientScript       if  Yii  app  - gt params  cdn              cs- gt scriptMap   array               jquery js    gt     ajax googleapis com ajax libs jquery 1 8 3 jquery min js                jquery min js    gt     ajax googleapis com ajax libs jquery 1 8 3 jquery min js                       cs- gt packages   array               bootstrap    gt  array                   basePath    gt   application res                    baseUrl    gt     netdna bootstrapcdn com bootstrap 3 1 1                     js    gt  array  js bootstrap min js                     css    gt  array  css bootstrap min css                     depends    gt  array  jquery                                   else            cs- gt packages   array               bootstrap    gt  array                   basePath    gt   application res                    baseUrl    gt  Yii  app  - gt baseUrl     res lib bootstrap                     js    gt  array  js bootstrap js                     css    gt  array  css bootstrap css                     depends    gt  array  jquery                                         cs- gt registerPackage  bootstrap          cs- gt registerCSSFile Yii  app  - gt baseUrl     res style main css         cs- gt registerScriptFile Yii  app  - gt baseUrl     res js main js       public function registerFancybox  buttons   false   thumbs   false          cs   Yii  app  - gt clientScript        cs- gt packages   array           fancybox    gt  array               basePath    gt   application res                baseUrl    gt  Yii  app  - gt baseUrl     res lib fancybox                 js    gt  array  lib jquery mousewheel-3 0 6 pack js    source jquery fancybox pack js                 css    gt  array  source jquery fancybox css                 depends    gt  array  jquery                       fancybox-buttons    gt  array               basePath    gt   application res                baseUrl    gt  Yii  app  - gt baseUrl     res lib fancybox source helpers                 js    gt  array  jquery fancybox-buttons js                 css    gt  array  jquery fancybox-buttons css                        fancybox-thumbs    gt  array               basePath    gt   application res                baseUrl    gt  Yii  app  - gt baseUrl     res lib fancybox source helpers                 js    gt  array  jquery fancybox-thumbs js                 css    gt  array  jquery fancybox-thumbs css                           cs- gt registerPackage  fancybox        if   buttons           cs- gt registerPackage  fancybox-buttons        if   thumbs           cs- gt registerPackage  fancybox-thumbs       public function registerFontAwesome          cs   Yii  app  - gt clientScript       if  Yii  app  - gt params  cdn              cs- gt packages   array               fontAwesome    gt  array                   basePath    gt   application res                    baseUrl    gt     netdna bootstrapcdn com font-awesome 4 0 0                     css    gt  array  css font-awesome min css                                 else           cs- gt packages   array               fontAwesome    gt  array                   basePath    gt   application res                    baseUrl    gt  Yii  app  - gt baseUrl     res lib font-awesome                     css    gt  array   css font-awesome min css                                 endif        cs- gt registerPackage  fontAwesome       public function registerGoogleAnalytics         if  this- gt config  settings google analytics id             Yii  app  - gt clientScript- gt registerScript  GA                 function i s o g r a m  i  GoogleAnalyticsObject   r i r  i r   function                 i r  q i r  q      push arguments   i r  l 1 new Date   a s createElement o               m s getElementsByTagName o  0  a async 1 a src g m parentNode insertBefore a m                 window document  script     www google-analytics com analytics js   ga                 ga  create      Yii  app  - gt params  cdn           SERVER  SERVER NAME                   ga  send    pageview                          STEP4   call the functions like this in   layouts main php  Yii  app  - gt getController  - gt registerDefaults    Yii  app  - gt getController  - gt registerFontAwesome    Yii  app  - gt getController  - gt registerGoogleAnalytics

User · Answer

There are many methods that we can include javascript  css into your Yii App  Today I will demonstrate three simple and helpul methods   A simple way to add js  css by editing config main php     application components    components   gt array                           clientScript   gt array               packages   gt array                   jquery   gt array                       baseUrl   gt    ajax googleapis com ajax libs jquery 1                         js   gt array  jquery min js                                                                      Using getClientScript  Usually  We add in block of code into Controller or layout of your theme   baseUrl   Yii  app  - gt baseUrl    cs   Yii  app  - gt getClientScript     cs- gt registerScriptFile  baseUrl   js yourscript js     cs- gt registerCssFile  baseUrl   css yourcss css      Or shorter   Yii  app  - gt clientScript- gt registerScriptFile Yii  app  - gt baseUrl   path to your javascript file  CClientScript  POS END   Yii  app  - gt clientScript- gt registerCssFile Yii  app  - gt baseUrl   path to css file      Include core js files  Yii  app  - gt clientScript- gt registerCoreScript  jquery         Yii  app  - gt clientScript- gt registerCoreScript  jquery ui      Faster Yii API Document  http   yii codexamples com

User · Answer

In Yii framework  You can include js and css using below method   Including CSS    Yii  app  - gt request- gt baseUrl  css styles css   Including JS    Yii  app  - gt request- gt baseUrl  js script js   Including Image    Yii  app  - gt request- gt baseUrl  images logo jpg   Note  By using layout concept in yii  You can add css and js instead of specifying in view template

User · Answer

To include JS and CSS files in a specific view you can do it via controller by passing the parameters false  true  which will include the CSS and JS for  e g     this- gt renderPartial       yourviewname       array           model    gt   model          false          true

User · Answer

Something like this    lt  php      baseUrl   Yii  app  - gt baseUrl      cs   Yii  app  - gt getClientScript       cs- gt registerScriptFile  baseUrl   js yourscript js       cs- gt registerCssFile  baseUrl   css yourcss css      gt

User · Answer

Using bootstrap extension  my css file  themes bootstrap css style css  my js file  root js script js  at theme bootstrap views layouts main php    lt link rel  stylesheet  type  text css  href   lt  php echo Yii  app  - gt theme- gt baseUrl    gt  css styles css    gt    lt script type  text javascript  src   lt  php echo Yii  app  - gt request- gt baseUrl    gt  js script js  gt  lt  script gt

User · Answer

Easy in your conf main php  This is my example with bootstrap  You can see that here   components   gt array       clientScript    gt  array           scriptMap    gt  array               jquery js   gt false     disable default implementation of jquery              jquery min js   gt false     desable any others default implementation              core css   gt false    disable              styles css   gt false     disable              pager css   gt false      disable              default css   gt false     disable                     packages   gt array               jquery   gt array                                 set the new jquery                  baseUrl   gt  bootstrap                     js   gt array  js jquery-1 7 2 min js                                bootstrap   gt array                          set others js libraries                  baseUrl   gt  bootstrap                     js   gt array  js bootstrap min js                     css   gt array                            and css                      css bootstrap min css                        css custom css                        css bootstrap-responsive min css                                       depends   gt array  jquery               cause load jquery before load this

User · Answer

Add the CSS and JS in The Layout Folder Access anywhere in the project       lt  --   Stylesheets   -- gt       lt  php          themepath Yii  app  - gt theme- gt baseUrl          Yii  app  - gt clientScript- gt registerCoreScript  jquery          gt            lt link href   lt  php echo  themepath   css custom css     gt   rel  stylesheet  media  all    gt     lt  --   Javascript   -- gt   lt  php Yii  app  - gt clientScript- gt registerCoreScript  jquery      gt   lt  script gt  -- gt   lt script type  text javascript  src   lt  php echo  themepath    gt  js video min js  gt  lt  script gt

User · Answer

This was also an easy way to add script and css in main php       lt script src   lt   Yii  app  - gt theme- gt baseUrl    gt  js bootstrap min js  gt  lt  script gt   lt link href   lt   Yii  app  - gt theme- gt baseUrl    gt  css bootstrap css  rel  stylesheet  type  text css  gt

User · Answer

In the view  add the following    lt  php      cs   Yii  app  - gt getClientScript       cs- gt registerScriptFile   js yourscript js   CClientScript  POS END      cs- gt registerCssFile   css yourcss css      gt    Please notice the second parameter when you register the js file  it s the position of your script  when you set it CClientScript  POS END  you let the HTML renders before the javascript is loaded

User · Answer

If you are using Theme then you can the below Syntax  Yii  app  - gt theme- gt baseUrl   include CSS File     lt link href   lt  php echo Yii  app  - gt theme- gt baseUrl   gt  css bootstrap css  type  text css  rel  stylesheet  media  all  gt    Include JS File   lt script src   lt  php echo Yii  app  - gt theme- gt baseUrl   gt  js jquery-2 2 3 min js  gt  lt  script gt    If you are not using theme  Yii  app  - gt request- gt baseUrl   Use Like this   lt link href   lt  php echo Yii  app  - gt request- gt baseUrl    gt  css bootstrap css  type  text css  rel  stylesheet  media  all  gt   lt script src   lt  php echo Yii  app  - gt request- gt baseUrl    gt  js jquery-2 2 3 min js  gt  lt  script gt

User · Answer

You can also add scripts from controller action  Just add this line in an action method then that script will apear only in that view   Yii  app  - gt clientScript- gt registerScriptFile Yii  app  - gt request- gt baseUrl     js custom js   CClientScript  POS HEAD     where POS HEAD tell framework to put script in head section

User · Answer

Also  if you want to add module assets both CSS and JS  you can use the following logic  See how you need to indicate the correct path to getPathOfAlias   public static function register  file         url   Yii  app  - gt getAssetManager  - gt publish      Yii  getPathOfAlias  application modules shop assets css           path    url          file      if strpos  file   js       false          return Yii  app  - gt clientScript- gt registerScriptFile  path       else if strpos  file   css       false          return Yii  app  - gt clientScript- gt registerCssFile  path        return  path      The above code has been taken from GPLed Yii based Webshop app

User · Answer

You can do so by adding  Yii  app  - gt clientScript- gt registerScriptFile Yii  app  - gt baseUrl   path to your script

User · Answer

lt link rel  stylesheet  href  http   code jquery com ui 1 10 3 themes smoothness jquery-ui css  gt   lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt   lt script src  http   code jquery com ui 1 10 3 jquery-ui js  gt  lt  script gt   lt link rel  stylesheet  href   resources demos style css  gt   lt script src   news js popup js  gt  lt  script gt    link must input over the first php tag in the view pag

User · Answer

Do somthing like this by adding these line to your view files    Yii  app  - clientScript- registerScriptFile Yii  app  - baseUrl   path to your javascript file    Yii  app  - clientScript- registerCssFile Yii  app  - baseUrl   path to css file

[javascript] Include CSS,javascript file in Yii Framework

Examples related to javascript

Examples related to php

Examples related to css

Examples related to yii