Type of Asset Location in Yii2

Assets, based on their location, can be classified as:

  • source assets: the asset files are located together with PHP source code which cannot be directly accessed via Web. In order to use source assets in a page, they should be copied to a Web directory and turned into the so-called published assets. This process is called asset publishing which will be described in detail shortly.
  • published assets: the asset files are located in a Web directory and can thus be directly accessed via Web.
  • external assets: the asset files are located on a Web server that is different from the one hosting your Web application.

Reference: Yii2 Doc

Remove index.php from URL in Yii2

To remove index.php from your URL in Yii 2.* add the following code to {application folder}/web/.htaccess

  1. RewriteEngine on
  2. # If a directory or a file exists, use it directly
  3. RewriteCond %{REQUEST_FILENAME} !-f
  4. RewriteCond %{REQUEST_FILENAME} !-d
  5. # Otherwise forward it to index.php
  6. RewriteRule . index.php

 

And add the following line to configuration file inside the component section

  1. 'urlManager' => [
  2. 'class' => 'yii\web\UrlManager',
  3. 'showScriptName' => false,
  4. 'enablePrettyUrl' => true,
  5. 'rules' => array(
  6. '<controller:\w+>/<id:\d+>' => '<controller>/view',
  7. '<controller:\w+>/<action:\w+>/<id:\d+>' => '<controller>/<action>',
  8. '<controller:\w+>/<action:\w+>' => '<controller>/<action>',
  9. ),
  10. ],

 

Change Layout Template in Yii Framework 2

Today We are going to change the layout of a module in Yii Framework 2.

1: Go to https://almsaeedstudio.com/ or AdminLTE-2.3.0 to download the template.

2: Extract it to module_name/web/

      a: replace module_name with your module name like here my module name is backend

      b: Rename the folder as you desire. Here I renamed it to template. Now my folder directory looks like backend/web/template/

3: Go to module_name/views/layouts/

      a: Create files as per your choice like header.php, footer.php, menu.php, etc.php. Here we are going to create three files named header.php, side_bar.php, footer.php assuming that we have one file inside layouts folder named main.php. If not create one with the same name.

4: Go to module_name/web/template/ open index.html in one of your favourite text editor

      a: copy the header part code as highlighted in screenshot, and past it to header.php

Header Part of Dashboard

      b: copy the header part code as highlighted in the screenshot, and past it to side_bar.php

Sidebar of Dashboard

      c: copy the header part code as highlighted in screenshot, and past it to footer.php

Footer of Dashboard

 

 5:  Copy all content of index.html to main.php and remove those part which you already have copied and pasted it to respective files. For example remove header, side bar, footer content respectively. Now remove the main content part as highlighted below in screenshot.

Center part of Dashboard

 

6: Now prefix to css and js path this code to make the file path dynamic : 

  1. <?php echo yii\helpers\BaseUrl::base(true); ?>/template/

7: Add Yii2 code whenever necessary. For example I’m going to add some of them.

    a: 

  1. <?php $this->endBody() ?>
before closing the body tag. this will generate debugging bar for you in development environment and other things required to add it to bottom.

    b: 

  1. <?php $this->beginBody() ?>
after opening the body tag.

    c: 

  1. <?php $this->head() ?>
before closing the head tag.

    d: 

  1. <?php $this->beginPage() ?>
before any html content lik doctype tag

    e: 

  1. <?= Breadcrumbs::widget([
  2. 'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
  3. ]) ?>
at the place where you like to show breadcrumb

    f: 

  1. <?= Alert::widget() ?>
to show the alert time to time. For example when login is success, or any other alerts.

    g: 

  1. <?= $content ?>
 This is the main part of the layout where your content will appear. This should be placed at the content of step five above.

 

8: You are done. Now type URL in browser, and you’ll see new look of admin dashboard.