How to check log error messages in Drupal 8?

As we know about log messages in Drupal, Log messages are our project related, every user related track (error, notice, warning, failure, PHP issue). In our Drupal we can check that track with URL '/admin/reports/dblog'.

And if we create a custom Module and we want to track every event of module, every time activity that we can write that code in this module.

Logs with an arbitrary level:

\Drupal::logger('module_name')->log($message); //When a module was installed

Normal but significant events:

\Drupal::logger('module_name')->notice($message); //Normals events, as cron execution

Exceptional occurrences:

\Drupal::logger('module_name')->warning($message); //exceptional cases not an error

Errors:

\Drupal::logger('module_name')->error($message); //error messages

And If we have requirement that we want to track this log error message by File, 

In that case we have a Drupal 8 module that we can install "File Log" module.

After configure, that file will be Create in root area Bydefault "site/default/files/logs".

I am going to share that module link here.

https://www.drupal.org/project/filelog

Note: If have any suggestions or issue regarding 'How to check log error messages in Drupal 8?' then you can ask by comments.  

Difference between hook_entity_presave and hook_entity_insert ?

Simple way to differentiate both hooks is the 'ID' is not available in hook_entity_presave() ("pre meaning before, and without saved ID is not assigned in database),
But this 'ID' will be available in hook_entity_insert().

Example:
function mymodule_node_insert(NodeInterface $node) { 
  $nid = $node->id();
}
OR
function mymodule_node_insert($node) {
  if ($node->getType() == 'your content type') {
        $node->setTitle('New entity ' . $node->id()); // to update title with node id
        $node->field_test = 'Id' . $node->id();  // or, to update a text field with node id
        $node->save();
  }
}

function mymodule_entity_presave(Drupal\Core\Entity\EntityInterface $entity) {
  if ($entity->getEntityType()->id() == 'node') {
    $entity->setTitle('New Title here');
    //Note : Not to save, because it's automatic.   
  }
}
OR
function mymodule_node_presave(Drupal\node\NodeInterface $node) {
  $node->setTitle('Edited Title');
  $node->set('body', 'this is the new body section');
  //Note : Not to save, because it's automatic.
}

Note: If have any suggestions or issue regarding 'Difference between hook_entity_presave and hook_entity_insert ?' then you can ask by comments.  

How to use breakpoints in drupal 8?

There we have simple way to use breakpoints means separate media query in drupal 8 and that will also help in speed up or optimize the website.
We have some following points, that will easily clear your doubts about breakpoints and separate media query.
1. We will create a file with the name of 'yourthemeORmoduleName.breakpoints.yml', Example for theme like your theme name is 'bartik' the file name will be 'bartik.breakpoints.yml'.
2. This breakpoints file will be use for write the code of media query for responsiveness. This file will be located in 'themes/bartik/' root.
Example:
bartik.mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
    - 1.5x
    - 2x    
bartik.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
    - 1.5x
    - 2x    
bartik.wide:
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x
    - 1.5x
    - 2x    
bartik.small:
  label: small
  mediaQuery: "(min-width: 0px)"
  weight: 1
  multipliers:
    - 1x
    - 1.5x
    - 2x
bartik.medium:
  label: medium
  mediaQuery: "(min-width: 768px)"
  weight: 2
  multipliers:
    - 1x
    - 1.5x
    - 2x
bartik.large:
  label: large
  mediaQuery: "(min-width: 1024px)"
  weight: 3
  multipliers:
    - 1x
    - 1.5x
    - 2x
Here the breakpoint properties are:
    Very first we will take a unique breakpoint name like: bartik.small:      (moduleName/themeName.unique breakpointName),
    Example: bartik.small: ,bartik.medium: ,bartik.large: ,bartik.wide: ,bartik.narrow: ,bartik.mobile:
   
    label - The human readable name of the breakpoint
    mediaQuery - a valid @media query(for responsiveness)
    weight - where the breakpoint is ordered in relation to other breakpoints
    multiplier - the ratio between the physical pixel size of the active device and the device-independent pixel size
               - 1x
               - 1.5x // supports Android
               - 2x  // supports Mac retina display
              
3. After that we will create new library and attach this breakpoints in 'bartik.libraries.yml' file.
Syntax:
libraryName:
  version: 1.0
  css:
    theme:
      css/desktop-small.css: { media: all and (min-width: 851px) }
      css/mobile.css: { media: only screen and (max-width: 767px) }
      css/mobile-common.css: { media: all and (min-width: 560px) and (max-width: 850px) }
     
    Same like we can create many viewports / breakpoints / media queries and attach with libraries and templates of our website.

4. Now this specific library we will render on template where we want to apply.
Example: {{ attach_library('mythemeName/libraryName') }}   

So in this way we can optimize the site and increase the performance with the help of breakpoints because with the help of this only in case of Mobile or Tab or Ipad or Desktop specific mentioned css will be rendered else not.
And the most important thing is clear the Cache and run Cron.

Note: If have any suggestions or issue regarding 'How to use breakpoints in drupal 8?' then you can ask by comments.  

How to create tabs by custom module in drupal 8?

Today we will discuss about, how to create new tab in custom module and set the linking. So before start, we will clear some points for custom module.
1. "module_name.links.task.yml" and "module_name.routing.yml" is important file, if we are going to create tabs.
2. Now Please follow the syntax, we will explain here for all parameters and syntax for tabs.
Example Syntax:   Here 'account_login' is example of my module name..

account_login.tab_1:                                   // This is the Tab Routers
  route_name : account_login.content         // This is route name and we will use this in routing.yml  file when we create routers and path
  title: account login                                   // This is Title of Tabs.
  base_route: account_login.content          // This is for set default open Tab
  weight: 10                                                // This is for tab weight or for order of Tab

account_login.tab_2:                                   // This is for second Tab Router
  route_name: account_login_otp.content   // This is route name and we will use this in routing.yml file when we create routers and path
  title: Work                                                 // This is Title of Tabs.
  base_route: account_login.content           // This is for set default open Tab
  weight: 20                                                 // This is for tab weight or for order of Tab
 
 
Now we will create "routing.yml" file.
Example Syntax:   Here 'account_login' is example of my module name..

account_login.content:        // so we will use same route name for first tab which we use in 'links.task.yml' file
   path: '/account/login'
   defaults:
   # Calls the list controller, defined in the annotation of the product entity.      
    _form: '\Drupal\account_login\Plugin\Form\userloginForm'
    -title: 'Two Way Authentication Login'
   requirements:
    _permission: 'access content'
    _user_is_logged_in: 'FALSE'
   
account_login_otp.content:                             // We will use same route name for second tab which we use in 'links.task.yml' file
   path: '/account/login/authenticate'
   defaults:
   # Calls the list controller, defined in the annotation of the product entity.      
    _form: '\Drupal\account_login\Plugin\Form\userloginotpForm'
    -title: 'Login Form Authenticate'
   requirements:
    _permission: 'access content'   
    _user_is_logged_in: 'FALSE'
   
   
Now just we have to install custom module and and clear the cache then put the first URL on brower (Ex: /account/login) and its will show our Tabs. So simple way to easily create custom tabs.

Note: What is Namespace and Use keyword in drupal 8 module?

What is Namespace and Use keyword in drupal 8 module?

Namespace: Namespace is a way of Organizing your classes into folder and ensure that your class does not conflict with another class with the same name because the class can be same but namespace will be unique.

Use Keyword: use keyword allows you to use classes from another namespaces when you need them.

Drupal 8 generally use PHP classes instead of functions. Two classes can have same name in different namespace. Namespace is way of organize the classes into folders and subfolders and the namespace as the path of the file.

If you will try the same name file with the same name in same folder, you will get the fetal error. but if you want to create the same name file then you have to create subfolder and put there.

Get the example of namespaces with create module.

1. Start the custom module with create directory name like 'testing'.
2. Now create 'info.yml' file. That file tells Drupal that your module exist and have some content/information.

The filename should be the machine name of your module with .info.yml extension, like testing is our module name so here name will be 'testing.info.yml'.
File content:
    name: Testing
    description: A custom module to build our Drupal 8 module
    package: Custom
    type: module
    version: 1.0
    core: 8.x
   
3. Some modules have controllers, plugins, forms, templates, test all are in src folder. So now we will create the src required folder.
4. Now we need a page controller for show the content output with these simple steps:
  a. Create src folder.
  b. now create Controller folder under the src folder.
  c. within the Controller folder , create file with name of 'TestingController.php'.
In the 'TestingController.php' file we will print our short message for testing.

    /**
     * @file
     * Contains \Drupal\testing\Controller\TestingController.
     */
    namespace Drupal\testing\Controller;
    
    use Drupal\Core\Controller\ControllerBase;
    
    class TestingController extends ControllerBase {
      public function content() {
        return array(
          '#type' => 'markup',
          '#markup' => t('Hello, we are here for testing.'),
        );
      }
    } 
 
Here the namespace has been defined as Drupal\testing\Controller. We will not here use full folder structure like ->  Drupal\modules\testing\src\Controller

here modules\src is silent from namespace and Drupal automatically mapped with namespace src folder, so that we have to follow standard folder structure of modules.

If we have to use TestingController class in different namespace then we have to include with 'use keyword' as its namespace -> use Drupal\testing\Controller\TestingController;

TestingController is extending another class called ControllerBase. So for get the classes, include ControllerBase with use statement -> use Drupal\Core\Controller\ControllerBase;

If use statement are not included then PHP will looking for ControllerBase and gives error.
"So use statement allows you to use classes from another namespace."

5. Now we have to create important file with name of 'routing.yml'. here the name will be 'testing.routing.yml' that will create in custom module root.

    testing.content:
      path: '/testing'
      defaults:
        _controller: 'Drupal\testing\Controller\TestingController::content'
        _title: 'Hello Tester'
      requirements:
        _permission: 'access content'
       
so now enable the module and clear the cache then go with the path '/testing' and get the output form controller.
       

Note: What is Namespace and Use keyword in drupal 8 module?

How to avoid Core CSS and JS from theme in drupal 8?

Sometimes we just want to render our custom css/js, and avoid globally rendered core css or js from every page. So we have to follow given below steps:

Step 1: First go to your theme ".info.yml" file.
Step 2: Then add "stylesheets-remove:" parameter and add css file path of all core files like,
Example: Theme file name is "account.info.yml".
then we just have to add 'stylesheets-remove:' for avoid under write files there..

stylesheets-remove:
  - core/themes/stable/css/system/components/autocomplete-loading.module.css
  - core/themes/stable/css/system/components/ajax-progress.module.css
  - core/themes/stable/css/system/components/align.module.css
 
Step 3: Clear full cache of project.

So this is the easy way to avoid core file from project pages.


Note: How to remove globally CSS from theme of project in drupal 8?

How to change in view ajax according to requirement in drupal 8?

It's easy to handle this core changes of views. One thing we have to sure that Views Advanced feature "Use AJAX:" should be yes.

"Use AJAX: Yes"

After that we can check our views/ajax request by Inspect and Check with Network Tab. We are giving an example to easy to use this.

Example: Suppose we have to start any view/ajax request on click on any "id" in html then our code in jquery file will be:

jQuery(document).on("click", "#prodresources", function (e) {                
    var arr = base_fullurl.split('/');
    var page_nid = arr[2]; 
    Drupal.attachBehaviors();
    getInfo('application_resources',['block_3','block_13'], page_nid);    // we are creating a function on click on "prodresources" id.
});

Parameters:
view_name : "application_resources"       // that is view machine name
view_display_id : ['block_3','block_13']  // we can use multiple views block on same view.
view_args: page_nid                       // this is argument for view


We just have to pass these three parameters view_name:machine name and view_display_id: blocks in array in multiple case and last one is view_args: if arguments pass.

function getInfo(view_name, blocks, args) {
    var base_url = window.location.origin;       
    $.ajax({
      url: base_url+'/views/ajax',
      type: 'post',
      data: {
        view_name: view_name, 
        view_display_id: blocks,
        view_args: args,
      },
      dataTypeview_display_id: 'json',
      success: function (response) {
          if (response[3] !== undefined) {
          var viewHtml = response[3].data;
          $('#destination_id').html(viewHtml);
          Drupal.attachBehaviors();
        }           
      },
          error: function(data) {
           alert('An error occured!');
          }
    });
}

Note: How to apply changes on views ajax according to requirement in Drupal 8?