Yii2 Assest Bundle not loading CSS in the view - yii2

I am facing an issue. I have custom Module in which i am trying to load CSS and JS by AppAsset but its not loading.
In my Module i have layouts folder in which i am trying to access the appasset and registering the view but its not loading. Even the asset bundle shows that assests are being loaded
Tell me what i am doing wrong. The code is as follows
namespace app\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/site.css',
'css/bootstrap-reset.css',
'css/style.css',
'css/style-responsive.css',
];
public $js = [
'js/jquery.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
my view file is as follows
<?php
use yii\helpers\Html;
use app\assets\AppAsset;
AppAsset::register($this);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" href="images/favicon.png">
<?php $this->registerCsrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
<!--Core CSS -->
</head>
<body class="login-body">
<?php $this->beginBody() ?>
<?php $this->endBody() ?>
</body>
</html>
But the css is not loaded at all and i cant see any of the css which i defined in Asset Bundle

Function <?php $this->head() ?> just adds a placeholder where all head meta tags, styles, scripts must be placed.
When <?php $this->endPage() ?> is called it replaces placeholder with registered meta tags, styles, scripts, etc.

Related

Why is my css file not being read in yii mailer?

I have an email controller with the following function inside
public function actionCreate()
{
$invoice_number_1 = Yii::$app->request->post('invoice_number_1');
$part_number_1 = Yii::$app->request->post('part_number_1');
$quantity_1 = Yii::$app->request->post('quantity_1');
$reason_code_1 = Yii::$app->request->post('reason_code_1');
// There are more of these but they work fine
Yii::$app->mailer->compose(
[
'html'=>'email/myfile.php'
],
[
'invoice_number_1' => $invoice_number_1,
'part_number_1' => $part_number_1,
'quantity_1' => $quantity_1,
'reason_code_1' => $reason_code_1,
// There are more of these but they work fine
])
->setFrom([Yii::$app->params['fromEmailAddress'] => Yii::$app->params['fromEmailName']])
// There are more of these but they work fine
->send();
}
The html file this links to is identical to the one is the same as in the example on the yii website but with two content security policy meta links and a link to my css as follows:
<?php
use yii\helpers\Html;
/* #var $this \yii\web\View view component instance */
/* #var $message \yii\mail\MessageInterface the message being composed */
/* #var $content string main view render result */
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?= Yii::$app->charset ?>" />
<meta http-equiv="Content-Security-Policy" context="style-src 'self' 'unsafe-inline'" />
<meta http-equiv="Content-Security-Policy" content="style-src-elem 'self' 'unsafe-inline'">
<link rel="stylesheet" type="text/css" href="../credit_request/credit_request.css" />
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<?= $content ?>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
I have also changed the html file to just
<?php
use yii\helpers\Html;
/* #var $this \yii\web\View view component instance */
/* #var $message \yii\mail\MessageInterface the message being composed */
/* #var $content string main view render result */
?>
<?php $this->beginPage() ?>
<?php $this->beginBody() ?>
<?= $content ?>
<?php $this->endBody() ?>
<?php $this->endPage() ?>
and it gives the same result.
The email/index.php page is as follows
<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline'">
<meta http-equiv="Content-Security-Policy" content="style-src-elem 'self' 'unsafe-inline'">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./credit_request.css" />
</head>
<body>
<div class="container_1">
<span class="numbers_1" ><?php echo strtoupper($invoice_number_1) ?>   -   <?php echo strtoupper($part_number_1) ?>   x   <?php echo strtoupper($quantity_1) ?>  </span>
<span class="reason_code_1"><?php echo strtoupper($reason_code_1)?></span>
</div>
</body>
</html>
When I send an email I get the following error referring to the link in the html file:
Refused to load the stylesheet 'http://192.168.0.90/email/index.css' because it violates the following Content Security Policy directive: "style-src 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
I also get the following three errors referring to the link in the email/index.php file:
The Content Security Policy 'style-src 'self' 'unsafe-inline'' was delivered via a element outside the document's , which is disallowed. The policy has been ignored.
The Content Security Policy 'style-src-elem 'self' 'unsafe-inline'' was delivered via a element outside the document's , which is disallowed. The policy has been ignored.
Refused to load the stylesheet 'http://192.168.0.90/otrs/index.css' because it violates the following Content Security Policy directive: "style-src 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
My css file is just
.container_1 {
background-color: red;
}
How do I get the css to be recognised?

Unable to register css / js using assets / registerCss function

I had created a testasset.php as follows :
<?php
namespace app\assets;
use yii\web\AssetBundle;
class TestAsset extends AssetBundle {
/*public $basePath = '#webroot';
public $baseUrl = '#web'; */
public $sourcePath = '#app/assets';
public $css = [
'/css/test.css',
];
public $js = [];
public $depends = [
/* 'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset', */
];
}
In controller i am simply rendering view file which register above asset.
view :
<?php
use app\assets\TestAsset;
TestAsset::register($this);
$this->beginPage(); ?>
<html>
<head>
<title>Register JS and CSS</title> <?php
//Yii::$app->view->registerCssFile('/css/style.css');?>
<!-- <link rel="stylesheet" href="/css/test.css" type="text/css" /> -->
</head>
<body>
<div id="page">
<div id="logo">
<h1>Register JS and CSS Test</h1>
</div>
<div id="nav">
<ul>
<li>!</li>
<li>#</li>
<li>#</li>
</ul>
</div>
<div id="content">
<h2>Test</h2>
<p> XYZ...!!! </p>
<p> ABC...!!! </p>
</div>
<div id="footer">
<p> Webpage made by XYZ </p>
</div>
</div>
</body>
</html>
But my test.css file is not getting registered.
I had tried using basepath and baseurl as well and registerCss Yii2 function but with no success.
Anyone Please suggest where i am lacking in my code.
You need to add
<?php $this->head() ?>
preferably somewhere between <head> and </head> for the header asset files to be rendered.
Simply add this in view file
<?php
$this->registerCssFile('PATH_TO_FILE');
?>
I have had the same issue on one of my advanced application template projects.
I've compared my layout/main.php file with the same on the Yii2 advanced application template and found missing $this->endPage() at the end of file.
It was removed by mistake and without it no js, ccs assets worked.

Injecting meta tag on certain pages with directive

I have an application where I want to inject a smartBanner meta tag, but only on certain pages.
On my index page I have:
<!DOCTYPE html>
<html ng-app="ngBoilerplate" ng-controller="AppCtrl">
<head>
<title ng-bind="pageTitle"></title>
<!-- add smart banner to select pages through smartBanner directive -->
<smart-banner></smart-banner>
</head>
<body>
<ui-view></ui-view>
</body>
</html>
I have a directive:
angular.module('boh.components.smartBanner', [])
.directive('smartBanner', function(){
return {
restrict: "E",
template: '<meta name="apple-itunes-app" content="app-id=1080200000"></meta>',
replace: true
} ;
});
My question is, do I simply call the directive by injecting the directive into my other page controllers?
I discovered the best way to deal with this was to work through the PHP wrapper for the app.
I ended up with something like this:
<?php
$urls = array("/app/explore", "/app/dashboard", "app/members", "/app/account-settings", "/app/jobs");
foreach ($urls as $key => $value) {
if( $_SERVER['REQUEST_URI'] === $value ) { ?>
<meta name="apple-itunes-app" content="app-id=########">
<?php }
}
?>

Yii2 theme integration

I have installed Yii2 advanced application, and now I want to change backend theme.
How can I do this?
Is there any file where I need to tell Yii2 that use my custom theme?
I established my theme under backend/web/themes/mytheme.
I just replaced this code in advanced/backend/config/main.php, but nothing happened!
'view' => [
'theme' => [
'pathMap' => ['#app/views' => '#app/themes/mytheme'],
'baseUrl' => '#web/themes/mytheme',
],
],
Then I replaced this code under common/config/main.php but nothing changed!
Yet another approach to change theme in Yii2 is:
Create a themes directory in web folder in frontend or backend where you want to change theme.
place your theme folder inside themes directory.
change $css and $js variables in AppAsset.php in assets folder in frontend or backend like:
public $css = [
//'css/site.css',
'themes/theme_folder/css/font-awesome.min.css',
'themes/theme_folder/css/slicknav.css',
'themes/theme_folder/css/style.css',
'themes/theme_folder/css/responsive.css',
'themes/theme_folder/css/animate.css',
'themes/theme_folder/css/colors/red.css',
//'themes/margo/asset/css/bootstrap.min.css',
];
public $js = [
'themes/theme_folder/js/jquery.migrate.js',
'themes/theme_folder/js/modernizrr.js',
'themes/theme_folder/js/jquery.fitvids.js',
'themes/theme_folder/js/owl.carousel.min.js',
'themes/theme_folder/js/nivo-lightbox.min.js',
//'themes/theme_folder/js/jquery-2.1.4.min.js',
//'themes/theme_folder/asset/js/bootstrap.min.js'
];
Do not include core bootstrap css, bootstrap js and jquery js as these are core APIs that are provided by Yii2. I have commented them above.
Use the below code to reference theme resources (css, js, images etc) in your main.php layout file or other site pages:
<?= Yii::getAlias('#web/themes/theme_folder') ?>/images/margo.png
There is no need to include css or js files in layouts->main.php file :)
Create a view folder in your themes/mytheme and move all view files like main.php into it and other layouts needed.
Also you can set your basic layout in the backend\config\main.php like
return [
'id' => 'app-backend',
'layout'=>'yourtheme', //your `themes/mytheme/views/` contain yourtheme.php in this case
...
Also change pathmap to
'pathMap' => ['#app/views' => '#app/themes/mytheme/views'],
In the backend folder make a theme folder .In file backend/config/main.php the components section add the code given below ,files in this folder will behave like the view folder in backend .
'view' => [
'theme' => [
'basePath' => '#backend/themes/demo',
'baseUrl' => '#backend/themes/demo',
'pathMap' => [
'#backend/views' => '#backend/themes/demo',
],
],
],
To install a new backend or frontend theme ( I did one page Bootstrap theme), please follow the below steps:
Copy the theme content i.e. directories like js, css, images, fonts etc to for instance backend->web folder.
Change your backend->assets->AppAsset.php class i.e. modify $css and $js arrays like
public $css = [
//'css/site.css',
'css/font-awesome.min.css',
'css/main.css',
'css/prettyPhoto.css',
'css/bootstrap.min.css',
];
public $js = [
//'js/bootstrap.min.js',
'js/html5shiv.js',
'js/jquery.isotope.min.js',
//'js/jquery.js',
'js/jquery.prettyPhoto.js',
'js/main.js',
'js/respond.min.js',
];
Please keep in mind to comment out core JQuery and Bootstrap JS files as they are provided by Yii2 by default.
Modify the backend->views->layouts->main.php file as under:
<?php
/* #var $this \yii\web\View */
/* #var $content string */
use backend\assets\AppAsset;
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use common\widgets\Alert;
use webvimark\modules\UserManagement\models\User;
use webvimark\modules\UserManagement\UserManagementModule;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<!--[if lt IE 9]>
<script src="<?= Yii::$app->request->baseUrl ?>/js/html5shiv.js"></script>
<script src="<?= Yii::$app->request->baseUrl ?>/js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="<?= Yii::$app->request->baseUrl ?>/images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?= Yii::$app->request->baseUrl ?>/images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?= Yii::$app->request->baseUrl ?>/images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?= Yii::$app->request->baseUrl ?>/images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="<?= Yii::$app->request->baseUrl ?>/images/ico/apple-touch-icon-57-precomposed.png">
<?php $this->head() ?>
</head><!--/head-->
<body data-spy="scroll" data-target="#navbar" data-offset="0">
<?php $this->beginBody() ?>
<header id="header" role="banner">
<div class="container">
<div id="navbar" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><i class="icon-home"></i></li>
<li>Services</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</header><!--/#header-->
<?= $content ?>
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-sm-6">
© 2013 <a target="_blank" href="http://shapebootstrap.net/" title="Free Twitter Bootstrap WordPress Themes and HTML templates">ShapeBootstrap</a>. All Rights Reserved.
</div>
<div class="col-sm-6">
<img class="pull-right" src="<?= Yii::$app->request->baseUrl ?>/images/shapebootstrap.png" alt="ShapeBootstrap" title="ShapeBootstrap">
</div>
</div>
</div>
</footer><!--/#footer-->
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
Now adjust your other content pages according to theme, place sections of the theme on your pages that suits you :)
Let me know if anyone comes across any difficulty :)
try this:
'components' => [
'view' => [
'theme' => [
'pathMap' => ['#backend/views' => '#backend/themes/mytheme'],
'baseUrl' => '#backend/themes/mytheme',
],
],
],
just put all your view folder in themes\mytheme

Switching to Codeigniter HMVC - Undefined functions?

I have setup a fresh install of codeigniter 2x and modular extensions (https://bitbucket.org/wiredesignz/codeigniter-modular-extensions-hmvc/wiki/Home)
It is my first time using HMVC, the decision to move from MVC to HMVC was to give myself more control of my login, admin, and members areas.
I have created my first controller in HMVC like so....
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Home extends MX_Controller {
function __construct()
{
parent::__construct();
$this->load->model('Content_model');
}
public function index()
{
$this->load->view('includes/template');
}
}
and a view like:
<?php echo doctype(); ?>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $pagecontent['seo_title']; ?></title>
<meta name="description" content="<?php echo $pagecontent['seo_description']; ?>" />
<meta name="keywords" content="<?php echo $pagecontent['seo_keywords']; ?>" />
<meta name='robots' content='all' />
<link rel="icon" type="image/ico" href="<?php echo base_url("images/favicon.png"); ?>" />
<?php echo link_tag('css/style.css'); ?>
<script type="text/javascript" language="javascipt" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="<?php echo base_url("js/jquery.validate.min.js"); ?>"></script>
<script type="text/javascript" language="javascript" src="<?php echo base_url("js/main.js"); ?>"></script>
</head>
<body>
<?php $this->load->view('includes/notify'); ?>
<div id="topbar">
<?php $this->load->view('includes/topbar'); ?>
When I try and view the page in my browser I get the following error:
Fatal error: Call to undefined function doctype() in C:\xampp\htdocs\mintfifty\application\modules\site\views\includes\template.php on line 1
The code has worked in all my previous codeigniter (mvc) projects but not (hmvc) why is it not working in HMVC? What am I doing wrong?
This issue is not likely to be caused by HMVC. doctype() function is defined in html helper and it seems that You have not loaded it (Unless you have auto-loaded it). Just load the html helper in your controller and it should work fine.
public function index()
{
$this->load->helper('html');
$this->load->view('includes/template');
}