Difference between #153 and #168 of
Yii v2 snippet guide

Changes

Title unchanged

Yii v2 snippet guide

Category unchanged

Tutorials

Yii version unchanged

2.0

Tags unchanged

tutorial,beginner,yii2

Content changed

[...]
```php
$model->scenario = "abc";
```

... but had no **rule** defined yet. I wanted to implement the rule later, but I didnt know that when you set a scenario to your model it **must** be used in method rules() or defined in method scenarios(). So take this into consideration. I expected that when the scenario has no rules it will just be skipped or deleted.

 
 
**Richtext / wysiwyg HTML editor - Summernote**
 
---
 
If you want to allow user to enter html-formatted text, you need to use some HTML wysiwyg editor, because ordinary TextArea can only work with plain text. It seems to me that [Summernote](https://summernote.org/getting-started/#simple-example) is the simplest addon available:
 
 
```javascript
 
// Add following code to file layouts/main.php .. 
 
// But make sure jquery is already loaded !! 
 
// - Read about this topic in chapter "Adding a google-like calendar"
 
 
<!-- include summernote css/js -->
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
 
 
// And then in any view you can use this code:
 
 
<script>
 
$(document).ready(function() {
 
  $('#summernote1').summernote();
 
  $('#summernote2').summernote();
 
});
 
</script>
 
<div id="summernote1">Hello Summernote</div>
 
 
<form method="post">
 
  <textarea id="summernote2" name="editordata"></textarea>
 
</form>
 
 
```
 
 
On this page I showed how to save Contacts inqueries into database. If you want to use the richtext editor in this section, open view contact/\_form.php and just add this JS code:
 
 
```javascript
 
<script>
 
$(document).ready(function() {
 
  $('#contact-body').summernote();
 
});
 
</script>
 
```
 
 
It will be saved to DB as HTML code. But this might be also a source of problems, because user can inject some dangerous HTML code. So keep this in mind.
 
 
Now you will also have to modify view contact/view.php like this in order to see nice formatted text:
 
 
```php
 
DetailView::widget([
 
  'model' => $model,
 
  'attributes' => [
 
    // ...
 
    'body:html',
 
  ],
 
])
 
```
 
... to discover all possible formatters, check all asXXX() functions on [this](https://www.yiiframework.com/doc/api/2.0/yii-i18n-formatter) page: 
 
 
**SEO optimization**
 
---
 
This is not really a YII topic but as my article is some kind of a code-library I will paste it here as well.
 
To test your SEO score you can use special webs. For example [seotesteronline](https://suite.seotesteronline.com/seo-checker), but only once per day. 
 
It will show some statistics and recommend enhancements so that your web is nicely shown on FB and Twitter or found by Google.
 
 
Important are for example OG meta tags or [TWITTER meta tags](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary). They are basicly the same. Read more [here](https://css-tricks.com/essential-meta-tags-social-media/). You can test them at [iframely.com](http://debug.iframely.com).
 
 
Basic tags are following and you should place them to head:
 
- Note that Twitter is using attribute "name" instead of "property" which is defined in OG
 
- btw OG was introduced by Facebook. Twitter can process it as well, but SEO optimizers will report an error when Twitter's tags are missing.
 
 
```html
 
 
<!DOCTYPE html>
 
<html lang="<?= Yii::$app->language ?>">
 
<head>
 
 
  <meta property="og:site_name" content="European Travel, Inc.">
 
  <meta property="og:title" content="European Travel Destinations">
 
  <meta property="og:description" content="Offering tour packages for individuals or groups.">
 
  <meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
 
  <meta property="og:url" content="http://euro-travel-example.com/index.htm">
 
  <meta name="twitter:card" content="summary_large_image">
 
 
  <!--  Non-Essential, But Recommended -->
 
  <meta property="og:site_name" content="European Travel, Inc.">
 
  <meta name="twitter:image:alt" content="Alt text for image">
 
 
  <!--  Non-Essential, But Required for Analytics -->
 
  <meta property="fb:app_id" content="your_app_id" />
 
  <meta name="twitter:site" content="@website-username">
 
  
 
  <!-- seotesteronline.com will also want you to add these: -->
 
  <meta name="description" content="blah blah">
 
  <meta property="og:type" content="website">
 
  <meta name="twitter:title" content="blah blah">
 
  <meta name="twitter:description" content="blah blah">
 
  <meta name="twitter:image" content="http://something.jpg">
 
```
 
 
Do not forget about file robots.txt and sitemap.xml:
 
 
```
 
// robots.txt can contain this:
 
User-agent: *
 
Allow: /
 
 
Sitemap: http://www.example.com/sitemap.xml
 
```
 
 
```
 
// And file sitemap.xml
 
<?xml version="1.0" encoding="UTF-8"?>
 
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
 
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
 
  <url>
 
    <loc>http://example.com/someFile.html</loc>
 
    <image:image>
 
      <image:loc>http://example.com/someImg.jpg</image:loc>
 
    </image:image>
 
  </url> 
 
</urlset> 
 
```
 
 
You can also minify [here](https://www.willpeavy.com/tools/minifier/) or [here](http://minifycode.com/html-minifier/) all your files. Adding "microdata" can help as well, but I have never used it. On the other hand what I do is that I compress images using these two sites [tinyjpg.com](https://tinyjpg.com/) and [tinypng.com](https://tinypng.com/).
 
 
**Other useful links**
 
---
 
 
- [SVG to CSS-background-image convertor](https://websemantics.uk/tools/svg-to-background-image-conversion/)
2 0
1 follower
Viewed: 11 077 times
Version: 2.0
Category: Tutorials
Written by: rackycz
Last updated by: rackycz
Created on: Sep 19, 2019
Last updated: 26 days ago
Update Article

Revisions

View all history