How to display records in custom module with pagination?

It is simple to display record/data from database in drupal 8 with pagination, here we are going to explain by example with some simple steps:
Step 1:
Create a folder with name of "gpcustom", this is our custom module name. Now create a file "gpcustom.info.yml" for create identity of module.
and the code for this file is..

name: Student Records
description: 'Display student records'
type: module
core: 8.x

Step 2:
Create a file with name of "gpcustom.routing.yml", here we are going to declare routing means path for display record page.
and the code for this file is..

google_feeds_list:
  path: 'student/record'
  defaults:
    _controller: '\Drupal\gpcustom\Controller\gpcustomController::student_record'
    _title: 'Student Records'
  requirements:
    _permission: 'access content'   
   
// _controller: '\Drupal\gpcustom\Controller\gpcustomController::student_record'  means '\Drupal\gpcustom\Controller\viewController' is file path for function and 'student_record' is the function name.   
// _permission: 'access content' means anybody can access this page without login.
// path: 'student/record' means display record page url.
// _title: 'Student Records' means title of page.

Step 3:
Create a folder with this hierarchy '\src\Controller\' and file with name of "gpcustomController.php".
and the code for this file is..
<?php
namespace Drupal\gpcustom\Controller;
use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\Database\Database;
use Drupal\Core\Url;

/**
 * Class DisplayTableController.
 *
 * @package Drupal\gpcustom\Controller
 */
class gpcustomController extends ControllerBase {

  /**
   * Returns a render-able array for a test page.
   */
  public function student_record() {
    //create table header
         $header = array(
         'id'=> t('SrNo'),
         'name' => t('Candidate Name'),
         'mobile' => t('Mobile Number'),
         'email' => t('Email ID'),
         'age' => t('Age'),
         'gender' => t('Gender'),
         'opt' => t('operations'),
         );

    //select records from table
    $query = \Drupal::database()->select('mydata', 'm');
    $query->fields('m', ['id','name','mobilenumber','email','age','gender']);
    $pager = $query->extend('Drupal\Core\Database\Query\PagerSelectExtender')->limit(3);
      // The actual action of sorting the rows is here.
    $table_sort = $query->extend('Drupal\Core\Database\Query\TableSortExtender')
            ->orderByHeader($header);
    $result = $pager->execute();
    $rows=array();
    foreach($result as $data){
        if ($data->id != 0 && $data->id != 1) {
   
        $operate = '<a href="/drupaladvance/mydata/form/mydata?num='.$data->id.'">Edit</a>|<a href="/drupaladvance/mydata/form/delete/'.$data->id.'">delete</a>';
        //print the data from table
         $rows[$data->id] = array(
             'id' =>$data->id,
             'name' => $data->name,
             'mobile' => $data->mobilenumber,
             'email' => $data->email,
             'age' => $data->age,
             'gender' => $data->gender,
             'operation' => t($operate),
           
         );
        }
    }
        //display data in site
         $form['table'] = [
         '#type' => 'table',
         '#header' => $header,
     '#rows' => $rows,
     '#empty' => t('No users found'),
     ];
      // Finally add the pager.
        $form['pager'] = array(
          '#type' => 'pager'
      );
     return $form;

    }
}
?>
So that's all for display data by csutom module in drupal 8, now clear the cache and goto the modules page '/admin/modules' and find by name your module and enable it.
and go to the URL which we decide in '.routing.yml' file.

Note: If have any suggestions or issue regarding 'How to display records in custom module with pagination?' then you can ask by comments. 

How to Create Custom Block and Render on template in drupal 8?

Here we are discussing simple concept for create custom Block and render on template. Just simple Steps, Please follow this.

1. We have to create folder under "/modules/custom/herobanner".
2. Inside this 'myblock' folder have to create 'info.yml' file like..

Example:
herobanner.info.yml
name: Hero Banner
type: module
description: Homepage hero banner.
core: '8.x'
package: Custom
dependencies:
  - block

 
3. Then we have to create one more folder like "/modules/herobanner/src/Plugin/Block" and create file in this folder with name of "HerobannerBlock.php".

There we will mention "Annotation meta data", that will allow us to identify the Block.
Here "HerobannerBlock" class will contain 4 methods:
build(), blockAccess(), blockForm(), blockSubmit()

4. Now we will start code in "HerobannerBlock.php" file.

<?php

namespace Drupal\herobanner\Plugin\Block;

use Drupal\Core\Access\AccessResult;
use Drupal\Core\Block\BlockBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Session\AccountInterface;
use Drupal\Core\Link;

/**
 * Provides a 'Banner' Block
 *
 * @Block(
 *   id = "banner_block",
 *   admin_label = @Translation("Banner block"),
 * )
 */

class HerobannerBlock extends BlockBase {
  /**
   * {@inheritdoc}
   */
  public function build() {
    return [
      '#markup' => $this->t('This is a custom block example.'),
    ];
  }

  /**
   * {@inheritdoc}
   */
  protected function blockAccess(AccountInterface $account) {
    return AccessResult::allowedIfHasPermission($account, 'access content');
  }

  /**
   * {@inheritdoc}
   */
  public function blockForm($form, FormStateInterface $form_state) {
    $config = $this->getConfiguration();

    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function blockSubmit($form, FormStateInterface $form_state) {
    $this->configuration['herobanner_settings'] = $form_state->getValue('herobanner_settings');
  }
}


Example:
namespace Drupal\herobanner\Plugin\Block;

use Drupal\Core\Access\AccessResult;
use Drupal\Core\Block\BlockBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Session\AccountInterface;
use Drupal\Core\Link;

/**
 * Provides a 'Banner' Block
 *
 * @Block(
 *   id = "banner_block",
 *   admin_label = @Translation("Banner block"),
 * )
 */

class HerobannerBlock extends BlockBase {
  /**
   * {@inheritdoc}
   */
  public function build() {
  /**
   * Read homepage_banner_products homepage_hero_banner
   */
    $query = \Drupal::entityQuery('taxonomy_term');
    $query->condition('vid', "homepage_banner_products");   
    $query->sort('weight','ASC');
    $tids = $query->execute();
       
    $homepage_banner_products_terms = \Drupal\taxonomy\Entity\Term::loadMultiple($tids);
    $i=0;
    $product_slider = '';
    foreach ($homepage_banner_products_terms as $term) {   
                
        $product_image_path = $term->field_image->entity->getFileUri();   
        $img_url = file_create_url($product_image_path);
        $product_image = $term->get('field_image')->getValue();
        $prdct_alt = $product_image[0]['alt'];
        $new_window = $term->get('field_open_in_new_window')->getValue();
        $target = (isset($new_window[0]) && $new_window[0]['value'] == 1)?'target="_blank"':'';               
       
        $enddate = $term->get('field_end_date')->getValue();       
       
        $curdate = date('Y-m-d');
        if($enddate >= $curdate){
        $active_class = ($i == 0)?'active':'';       
          
            $product_slider.='<div class="item '.$active_class.'">
                                <div class="item-inner">
                                    <h2>'.$term->name->value.'</h2>
                                    <div class="productthumb"><img src="'.$img_url.'" alt="'.$prdct_alt.'"></div>
                                    '.$term->description->value.'
                                    <a href="'.$term->field_title->value.'" '.$target.' class="linkBtn mdhbanner">'.$term->field_support_option_title->value.'<span class="icon-icon_link"></span></a>
                                </div>
                            </div>';       
       
            $i++;   
           
        }
    }
   
    $html = '<div class="arc-container layer-3 layer" data-depth=".5" data-type="parallax">
            <div class="arc-circle">
                <div class="featuredproduct">
                    <div class="pop-scroll-outer">
                        <div class="pop-scroll">
                            <div class="slidercontrol">
                                <a type="button" class="slick-prev slickbutton carousel-control" href="javascript:void(0)">
                                    <span class="icon-icon_link icon-flip" href="#myCarousel" data-slide="prev"></span>
                                </a>
                                <strong>Featured Products</strong> <span class="num"></span>
                                <a type="button" class="slick-next slickbutton carousel-control" href="javascript:void(0)">
                                    <span class="icon-icon_link" href="#myCarousel" data-slide="next"></span>
                                </a>

                            </div>

                            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
                                <div class="carousel-inner">
                                    '.$product_slider.'
                                </div>
                            </div>
                        </div>

                    </div>
                    <!--Featured Product-->
                </div>
            </div>
        </div>
    </div>';
   
    return array(
      '#markup' => $this->t($html),
    );
  }
}

?>

Now we have to install and Enable our module and then clear the cache.

Place Block

Choose Block

And Pass the 'id' of your Block in this function..

Syntax: {{ drupal_block('myblock_id') }}

Example: {{ drupal_block('banner_block') }}

After this clear the cache and get the result.


Note: If have any suggestions or issue regarding 'How to Create Custom Block and Render on template in drupal 8?' then you can ask by comments.

How to optimize the website in drupal 8 ?

Sometimes we create the website but that is not quickly responded and we don't get proper users response on site. Sometime our client want to Speed Up the website and we just go through the Admin section and Aggregate CSS and JS files. But that is not properly working as our expectation. So here very first time we have some suggestion in easy way to Speed up the website and that will surly Speed up our website . That is tested with our projects. Please have a look suggestions for Desktop and Mobile both end..

Suggestions:
- Module to speed up site(Image Lazyloader, ADVANCED CSS/JS AGGREGATION)  --> We have added screen shot for checked options.
- Aggregated CSS/JS code.
- Remove extra CSS/JS that is not use full for front page.
- Set required custom image size(image styling) for page images.
- Create custom size of images(Home -> Administration -> Configuration -> Media -> Add image style).
- Follow Google page speed suggestion.
- Reduces Request to server.
- Uninstall extra modules.
- Use Optimized Image.
- Use critical css only ,use only those css/js which you need most.
- Add Async and defer attribute.
- Eliminate render-blocking resources.

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