After postponing couple of times, the first Meetup of Drupalchix (Women in Drupal), in Bangalore was held on 23’ Jan 2016, and was organized by us in association with the Bangalore Drupal User group. The main aim of this innovative Meetup was to introduce Drupal as an easy to use CMS and let the participants interact and explore the various career options that Drupal has to offer. Drupalchix is a unique and active female professional network with regular meetups and events across different locations, and is intended to encourage more women to learn and work with Drupal.

The event in Bangalore was a perfect blend of fun and learning, and was also attended by 10+ Drupal developers from prominent corporate firms such as TCS, Mindtree, Valuebound amongst others from a few colleges. They gave rich insights into using Drupal and its various career options. It was designed to introduce the basics of Drupal in a well-structured and easy to understand manner, so that it gives the attendees a perfect introduction into one of the most popular, widely used and comprehensive open-source CMS (Content Management System) technologies used globally. The event was a perfect opportunity for participants from different educational and technical backgrounds to network and share their views on career prospects in Drupal.

We at Valuebound are leaders in the field of Drupal consulting, and have also been using our rich domain experience in designing training programs that essentially focus on learning from a practical usage perspective, thereby adding much value and utility to the learners. The first meetup in Bangalore that was organized by us was a perfect success, and we aim to organize many such events across Bangalore so as to have maximum participation and exposure in our quest for making Drupal an excellent career choice for girls.  Our training camps and events are especially designed to share our seasoned Drupal best practices with a unique focus on real-time usage, thereby giving participants a much needed advantage in their career and networking opportunity.

We wish that our readers and participants spread the word on our training programs and the Drupalchix (Women in Drupal) community events, so that we can work towards increasing the awareness of Drupal amongst female professionals and students. Please feel free to share the word amongst your friends and colleagues and do contact us for more information.

Installation of Drupal requires a Web server. We will be employing XAMPP package for the same purpose. XAMPP is a free and open source web server solution stack. It stands for (X-cross platform), (A-Apache HTTP Server), (M-MariaDB), (P-PHP), (P-Perl).  XAMPP is hassle free and is widely used by developers all over to create a local web server.

To install XAMPP, one can download it via the below provided link
https://www.apachefriends.org/download.html

On the basis of requirement of individual system and configuration one can install the XAMPP.

To begin installation, Open/double-click .exe file

Step 1: On opening the file, a XAMPP set up wizard will initiate:

Step 2: Click next, a screen will appear where you can choose the components you wish to keep, on clicking next here you will be getting default components provided by XAMPP.

Step 3: Select the location in your system where you wish to install the XAMPP.

Step 4: Click on next to begin installation

Step 5: On successful completion of Installation, following screen should appear.

Keep the box checked (Do you want to start the Control Panel now),
Click on finish to complete the process, control panel screen will automatically launch.

The above steps would concluded the installation of a local web server in your system, Apache and MySQL is running as we can see from the control panel. To check type 127.0.0.1/dashboard/ or localhost/dashboard/

Now since we have a local web server in our system, we can begin with Drupal 8 installation. We can download the latest Drupal 8 package from the below link:

Ref URL: https://www.drupal.org/news/drupal-8.0.0-released
Version: drupal 8.0.1
drupal-8.0.1.zip

Click on Save file.
The next step is to install drupal in the system. It includes following steps:

Step 2.1: Copy the drupal .zip file in “C:\xampp\htdocs” folder.
The path should look like this

Step 2.2: Extract .zip file.
Step 2.3: On your web browser, type 127.0.0.1/drupal-8.0.1, where drupal-8.0.1 is the extracted folder name.
The step to copy and paste the default.settings.php into settings.php and similarly create a “Files” folder under sites/default and give read write execute permission for all type of user.

Following above steps will take you to the drupal installation page

One can choose the language of installation by clicking on the drop down box where default language is English.

Step 2.4: Click on next and a profile selection page is opened, Standard profile is the default profile.

Step 2.5: Click on Save and Continue

A requirements review page opens up that informs us about the requirements on various parameters viz web server, PHP version, library, holder permission, settings.php which are needed for the drupal to operate in our system.

Click on continue anyway which is at the bottom of the installation page

Step 2.6: To install drupal 8, we need a database which can be created by visiting URL localhost/phpmyadmin/serverdatabases.php

The above URL corresponds to phpmyadmin which functions as a data administrator for MySQL from where we can create, modify or delete databases; also execute SQL statements and manage users and permissions.

Any human-readable name could be given as database name, here we have provided our database name as ‘drupal8’. One can provide any similar name however it is suggested that a simple name is given. Underscores (_) may also be used.
After providing the name click on ‘create’.

Please note that the name ‘drupal8’ given by us while creating the database becomes the name of the database name while installing drupal. The database username is root as we can see in the above screenshot, which is a default database username.
The password section is to be left blank in case there is no password assigned already.

Click on save and continue. Installation should start.

After installation, configure site page will open which will need some details from us viz site name/site email address/username/password/Country/Time zone and update notification check boxes.

Details provided by us in this case are;
Site name -MyName (one can give any site name)
Site address - myname@gmail.com
username - admin(one can provide any username they like)
Password - choose a strong password.
Country - India
Timezone - Asia/Kolkata

checkbox for updates notification are ticked default.

Click on save and continue.

A window like above will appear that will notify that the Drupal has been installed in your system.

The URL for same is localhost/drupal-8.0.1  where drupal-8.0.1 is the folder name.

 

In earlier blog post, we have seen how to pass arguments in views pages in Drupal 8. But not all the time we have to use views. What if we have a custom page created where we have to pass arguments to a page thru’ url. We are going to explore how to do the same in this blog post. Before we get into passing argument to a page, i would like to go through small introduction of Controller

In earlier versions of Drupal (D7), there was hook_menu. Hook menu actually managed a few different features. In addition to handling incoming requests, it provided menu links, access control, action links, and a number of other features that are all very tightly coupled together.

But in Drupal 8 By using Symfony2 Routing component, we are able to split out the route handling aspect, and get a much improved and feature-rich solution. the main reason for using Symfony2 Routing was to be able to create routes on more than just the path, for example make a request for JSON, XML or HTML while still using the same path.

If you wants to grab more info on controller please visit here [https://www.drupal.org/node/2116767]. In order to pass the page argument using url, we need to  create one new controller under modules/custom//src/Controller with name called “ControllerName.php”     

Step 1: Created controller

addition.form:
    path: '/resume/addition/{first-arg}/{second-arg}/{third-arg}'
    defaults:
      _controller: '\Drupal\\Controller\::’'
    requirements:
      _permission: 'access content'

Where,
path:
path: '/resume/addition/{first}/{second}/{third}'
path name should be any generic name with three different argument.

Controller:
_controller: '\Drupal\resume\Controller\AdditionController::add'
To accessing a specific controller use _controller path with Controller name and accessible function name. In my case AdditionController is my controller with add function.

Step 2: Now lets create another Controller AdditionController for additional functionality, where we are going to pass three different argument & performing addition for three numbers.
Once these arguments has passed on. we perform addition of three numbers & storing the output to an array.

$total[] = $first + $second + $third;

To render the output we are using theme function.

 $render_array['addition_arguments'] = array(
      // The theme function to apply to the #items
      '#theme' => 'item_list',
      // The list itself.
      '#items' => $total ,
      '#title' => $this->t('Addition of 3 values'),
    );
return $render_array;

Code Base for Controller:

namespace Drupal\resume\Controller;

use Drupal\Core\Controller\ControllerBase;

/**
 * Controller routines for page example routes.
 */
class AdditionController extends ControllerBase {

  public function add($first, $second, $third) {

    $total[] = $first + $second + $third;

    $render_array['resume_arguments'] = array(
      // The theme function to apply to the #items
      '#theme' => 'item_list',
      // The list itself.
      '#items' => $total ,
      '#title' => $this->t('User Information'),
    );
    return $render_array;
  }
}

Once we have done with controller and routing system. we can visit the page by passing three argument and  we can see the data on renderable page. Below is the attached screenshot

Where i’m passing 20,30,40 as argument and i’m getting sum of those numbers: 90 on that page
URL: example-name/addition/20/30/40

What we have seen above is very simple demonstration of how to to pass arguments from URL to page and making use of the same to calculate some values.

Source code: https://github.com/xaiwant/D8-passing-arg-to-page

Drupal Console is command line tools, help us to speed up the development tasks for Drupal websites. After installing console, you will be able to perform actions simply by typing commands into a terminal, actions that usually takes multiple steps in a web browser (Drupal Installation/ Field addition on Bundle), or Writing a basic code.
Just to add here, Drupal Console works with Drupal 8 only, whereas Drush runs on Drupal 8.

Below are the syntax for Console, With Drupal Console you can generate boilerplate code for modules, themes, controllers, forms, blocks, and much more.
        
        Node
              drupal create:nodes
        Controller
              drupal generate:controller
        Entity
        Form alter hook
        Module
              drupal generate:module
        Block
              drupal generate:plugin:block
        Field type, widget and formatter
        Image effect
        Rest resource
        Service
        Theme
              drupal generate:theme
        Switch maintenance mode on or off
              drupal site:maintenance on
        Run unit tests

There are few similar tools available e.g.

Module Builder: (Generates Drupal 6, 7, or 8 module scaffolding)
Drupal Module Upgrader: (Converts modules from Drupal 7 to Drupal 8; generates static help file with links to relevant change records)
Drupal 8 Tools: (Drupal code generator written in bash)
Drush: (Interact with Drupal installation via CLI, create aliases, create custom commands)

Why it’s Unique?

Drupal Console use modern PHP practices introduced into Drupal 8, includes object-oriented PHP. Console isn't a Drupal module, but was built with the Symfony Console Component and other libraries, such as Twig, to generate PHP, YAML, and other file types used in Drupal 8 module development.

It is a designed for anyone using or planning to use Drupal 8. At the moment, it is used via a CLI, but there are plans to make it accessible through the Drupal administration interface.

Drupal Console provides a number of commands for creating module temporary structure and boilerplate code. For any command, you will be asked a series of questions about what you want. In that case files are created and inside these files, classes — complete with namespacing and use statements — are created for you with the naming convention you specified in the command's prompts.

Let’s Have a look

For installation please refer here.
Once you have done with installation type drupal in terminal and you’ll get below list

To pull out all the commands and option for console type drupal list & you will get list of options and available commands.

As i’m going to show you how can we create boilerplate code “Generating Custom form in Module”
Before we start with building a custom form we need to generate a module first

Step 1: Run drupal generate:module

// Welcome to the Drupal module generator

 Enter the new module name:
 > Contact us

 Enter the module machine name [contact_us]:
 > [you can provide own machine name or else it will take default [contact_us]]

 Enter the module Path [/modules/custom]:
 > [you can provide own path or else it will take default [/modules/custom]]

 Enter module description [My Awesome Module]:
 > Creating custom contact us form with few fields

 Enter package name [Custom]:
 > [you can provide own choice or else it will take default [Custom]]

 Enter Drupal Core version [8.x]:
 > [you can provide own Core version or else it will take default [8.x]]

 Do you want to generate a .module file (yes/no) [no]:
 > [you can provide own choice or else it will take default [no]]

 Define module as feature (yes/no) [no]:
 > [you can provide own choice or else it will take default [no]]

 Do you want to add a composer.json file to your module (yes/no) [yes]:
 > [you can provide own choice or else it will take default [yes]]

 Would you like to add module dependencies (yes/no) [no]:
 > [you can provide own choice or else it will take default [no]]

 Do you confirm generation? (yes/no) [yes]:
 > [you can provide own choice or else it will take default [yes]]

Once we pressed yes we will get below files

Generated or updated files
 Site path: /var/www/html/drupal-8.0.2
     1. modules/custom/contact_us/contact_us.info.yml
     2. modules/custom/contact_us/contact_us.module
     3. modules/custom/contact_us/composer.json

Finally we have done with module creation using Drupal Console. using Console we can reduce the time and energy to develop custom module or site configuration, which takes more when we go through step by step procedure in ui level.

Git Source: https://github.com/xaiwant/D8ConsoleForm/tree/master/contact_us

It is really exciting to work with twig in Drupal 8. Here we are going to find out how to use if else condition in twig in page.html.twig or any *.twig files. 

We are having a region called ‘banner’, which is already defined in your theme.info.yml. In the page.html.twig we need to check that if there is any content is present in the ‘banner’ region. For that, we need to use the if-else condition in our *.html.twig file. So we need to use the following code on your page.html.twig file.

{% if page.banner is empty  %}
   

Please place a block in the banner region.

{% else %}    {{ page.banner }} {% endif %}

From the above code snippet, you can understand the following points, 

How to check the if empty the region in drupal 8 twig?

   {% if page.banner is empty  %}

How to print the region in drupal 8 twig?

  {{ page.banner }}

How to use the if else condition in drupal 8 twig?

  {% if page.banner is empty  %}

Please place a block in banner region.

  {% else %}     {{ page.banner }}  {% endif %}

How to use nested if else condition in drupal 8 twig?

 {% if page.header  %}

    {{ page.banner }}

  {% elseif  page.banner %}

    {{ page.banner }}

  {% else %}

Please pace a block in either header or banner region.

  {% endif %}

 

Below is the CodeBase from page.html.twig from one of the "Bartik" Theme

So we understood how to use the if else in twig drupal 8.

Related

How to Render Twig Blocks

What is Twig?

Twig, a modern template engine for PHP, is part of the Symfony2 framework and is a direct replacement for PHPTemplate. Twig is created by SensioLabs, people who developed the Symfony2 framework itself. Drupal 8 uses Symfony2 codebase. Because Twig is natively supported by Symfony2, Twig compiles templates to optimize PHP code. Now the overhead compared to regular PHP code was reduced to the very minimum. Drupal 8 themes are much more secured,PHP calls no longer exist in theme files. This will also make theming easier to understand for non-programmers.

In Twig templating system one of the major change is, all of the theme_* functions and PHPTemplate based *.tpl.php files have been replaced in by *.html.twig template files.

In this article I’m giving you the basic introduction to Drupal 8 theme Template “Twig”. which holds basic introduction, advantage over Drupal 7 PHPTemplate, File naming convention  and basics of Twig syntax.

Drupal 7 PHPTemplate Vs Drupal 8 Twig

Let's do compare two snippets from Drupal 7 and Drupal 8.

Docblock:
PHPTemplate:

  /**
   * @file
   * File description
   */
?>

Syntax: D7

Drupal 7 Mixes up data types including strings, objects and arrays. It has many different ways to printing variables, object , array etc.

Printing a variable:
      

Printing a hash key item:
      

Assigning a variable:
       comments; ?>

Assigning an array:
        $author, '!date' => $created); ?>

Conditionals Structure:
    if  condition is TRUE
    comments): endif; ?>

    if is not empty.
    comments)): endif; ?>

    if variable is SET
    comments)): endif; ?>

    if condition is TRUE | FALSE
    0): endif; ?>

Control structures:

{% for user in users %} {% endfor %}

Filters:

Check_plain:

Translate:

Translate with substitutions:
$user->name)); ?>

There is also different way to printing variable in drupal 7 print() or print render()    

Drupal 7 node.tpl.php file:

Docblock:

Twig:
  {#
  /**
   * @file
   * File description
   */
  #}

Syntax: D8

In Drupal 8 uses common pattern to access all variables consistently.
In twig we don’t have to rendered your renderable. you can use
{{just print here}}

Printing a variable:
   

Printing a hash key item:
   {{ item['#item'].alt }}

Assigning a variable:
   {% set custom_var = content.comments %}

Assigning an array:
   {% set args = {'!author': author, '!date': created} %}

Conditionals Structure:

   if condition is TRUE
   {% if content.comments %} {% endif %}

   if it is not empty
   {% if content.comments is not empty %} {% endif %}

   if it is not SET
   {% if content.comments is defined %} {% endif %}

   if condition is TRUE | FALSE
   {% if count > 0 %} {% endif %}

Control structures:

for each loop
Twig: {% for user in users %} {% endfor %}

Filters:

Check_plain:
          {{ title|striptags }}

Translate:
          {{ 'Home'|t }}

Translate with substitutions:
          {{ 'Welcome, @username'|t({ '@username': user.name }) }}

Drupal 8 node.html.twig

 

Inconsistency:

Sometimes Drupal 7 relies on template files, other times it relies on theme functions. This can make it hard to understand how to override some parts of the Drupal core. In Drupal 7 we use to create multiple template file and theme function to override the markup.

Drupal 8 only uses template files for rendering. kind of less template.

Redundancy:

Drupal 7 would have multiple files with the same lines of code, including:
Drupal 8 uses lines like this: {% extends "node.html.twig" %}. Twig integration eliminates the need for copying and pasting base or parent theme template files into your custom templates. This means you can use proper inheritance inside your theme files and eliminate a lot of duplicate code.

Security:

Drupal 7 would often prints unsanitized data. You could even run database queries from directly inside the theme files. Drupal 8 can automatically sanitize variables and won't permit unsafe functions to run.

File Naming Conventions for Drupal.

The naming convention for all theme templates has changed from *.tpl.php to *.html.twig.

HTML template

           Base template: html.html.twig
                                  location: core/modules/system/templates/html.html.twig

            Page template:
                              Pattern: page--[front|internal/path].html.twig
                              Base template: page.html.twig
                               location: core/modules/system/templates/page.html.twig

             Regions:
                             Pattern: region--[region].html.twig
                             Base template: region.html.twig
                             location: core/modules/system/templates/region.html.twig

             Blocks:
                             Pattern: block--[module|-delta]].html.twig
                             Base template: block.html.twig
                             location: core/modules/block/templates/block.html.twig

             Nodes:
                              Pattern: node--[type|nodeid]--[viewmode].html.twig
                              Base template: node.html.twig
                              location: core/modules/node/templates/node.html.twig

         
Twig templating engine will be a fresh air to themers and developers. Cleaner and more secure code will promote good practice and enable us to produce better work.

Contextual filters in Views are powerful, but getting them to work perfectly can be a tricky sometimes. This will hopefully save some people from the headache I had gone thru’. Contextual Filters in Drupal 8 are similar to the Drupal 7 with advance feature and more dynamic compared to normal filter. A Contextual Filter provides more convenient way to fetch the data either from variables sent programmatically or URL.

 For example: 
 A contextual filter for a node author would be able to display all nodes written by the currently logged in user.

My goal was to have a page of Articles that could be filtered  based on logged in user. In this tutorial we will use author relationship to get the name of the author and use it in a Display summary to list all the users with some additional information.

Step 1: We have to go through basic View Page creation by visiting /admin/structure/views/add

Fill up View Basic information, Page settings detail and click on Save and edit. 

I have created a view with below input.

View Basic Information
         View name: Article_by_You
         Description: listing article created by logged in User

View Settings
         Show: Content
         of Type: Article
         
Page Settings
        Page Title: Article_By_You
        Path: article_By_You

Page Display Settings
         Display format: Table

Step 2: Once we have done with Step1, next we would be redirected to View Settings Page. Here I have added Body, Authored by & Authored on under Fields Section. Now click the Advanced Section on extreme right and click on CONTEXTUAL FILTERS “Add” button.

FIELDS
     Content: Body
     Content: Authored by (Authored by)
     Content: Authored on (Authored on)

 

Step 3: Search For “Authored by” and click on Apply (all displays).

Step 4: Select “Provide default value” under WHEN THE FILTER VALUE IS NOT IN THE URL & Select Type as “User ID from logged in user” and click on Apply (all displays).

Step 5: So, we are done with view creation. It’s time to review by visiting
 the URL: example.com/d8/article-by-you

This page is showing articles created by logged in users and we don’t have to pass any additional argument. Try logging with some other user credentials and visit article-by-you page to test the view we have created just now. 

We are happy to announce that we are running Drupal training sessions on Saturday, Feb 6th 2016 as part of the Global Training Days. The initiative is run by the Drupal Association to introduce newcomers to Drupal.

Come and join us to learn about what Drupal does and how it can help you. We will learn about Drupal and build our first website live.

What is a Drupal Global Training Day?

Drupal Global Training Days is a worldwide initiative to increase the adoption of Drupal. All across the world, people are teaching and learning Drupal, and sharing that open source love.

What is it? 

It's a full day introduction to Drupal. Attendees will leave having successfully built a Drupal site. Part of the Drupal Global Training Day initiative by the Drupal Association.

What we are going to do -

1. Install Drupal 8 using Acquia Cloud - https://www.acquia.com/drupal-8
2. Familiarize ourseleves with the new User Interface and options
3. Learn about how to create content
4. Experiment with the inbuilt views as well as image handling
5. Create new blocks and understand about regions
6. Manage users
7. Q&A

Whose it for? 

• It's for those interested in taking up Drupal as a career path.
• Web developers/designers willing to get started with Drupal.
• Project managers managing or considering Drupal projects.
• Decision makers evaluating Drupal. 

Cost? It's FREE. Venue provided by Valuebound.

WHY IS THIS SESSION FREE?

Introducing Drupal among students and amateur designers free of cost is one of the many ways by which we thank this open source community.

Valuebound Interactive is solely dedicated in helping organizations and individuals to adopt Drupal in their operations in the most effective manner. At Valuebound, we believe in giving result oriented training sessions which will help you to build impeccable websites.

Limited availability to ensure personal guidance throughout the day.

Why we need Web Services? 

We have an online shop showing product catalog and info. & we want to make Mobile app which can interact with website with CRUD functionality.
In that case we need is to extend Drupal to receive and send data in machine readable format so it would be easier for the Application developer to make the app. So we need to make Drupal support a Web Services.

How does it works?

In the website, we have a content type (example:“article”) with other info. We need the app to use our website using simple requests, which can be made using RESTful Web API. REST uses the HTTP methods for communication between 2 devices in machine-readable format (JSON / XML) and is widely used in the WWW.
I’m assuming you are familiar with Contributed Services & Services view module in Drupal 7. In this article i‘m going to show you How can we create Rest Export view in Drupal 8 with few simple step and this won’t require any contributed module unlike drupal 7.

Drupal 8 Provides core RESTful Web Services & Serialization in one single package called WEB SERVICES & also Views (help us to create Rest Export View).

Here's a 5-step guide to using REST Export Services with Views.

Scenario: To create a REST Export View for Article Content with some additional fields.
and it should display node by passing node id.

Step 1: Enable RESTful Web Services & Serialization. once enabled the module you will get REST EXPORT SETTINGS option in Views creation page.

Step 2: Fill up View Detail as provided below View name as ArticleByID with some Description. selected Article as the content type. Tick the box against "Provide a REST export" under "REST export settings". & provide a link under "REST export path". This link is the End point to fetch the data. Here, we are giving path "/json/article-by-id" click save and edit.

Step 3: Once we landed to View Configuration page Click "Settings" next to "Format:Serializer". You will get the option to choose the format of output data ( json / xml ) at the given End point  "json/article-by-id". as i have selected json format.

Step 4: Added Title/ Body/ Image under FIELDS section. Selected Article Content type under FILTER CRITERIA. and also added exposed Node id to filter based  on specific NID and saved the setting.

Step 5: To view the formatted data we can test using any REST client. for google chrome. i have downloaded a plugin “JSONView”
ref url: https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?utm_source=chrome-app-launcher-info-dialog

Once we have done with installation of JSONView. we can visit the end point and view the output as below
End point: example-name/drupal-8.0.1/json/article-by-id?nid=5

Where nid is filter name with node ID

 

Sometimes we need to add forms in a page which can be accessed using horizontal tabs. Default Drupal login forms already has few tabs e.g. Log in, Create new account & Reset new password. Either we can add additional tab here itself or we can also add tab if we need to show multiple form in a page using writing a small custom module.

What is module-defined local tasks?
Tabs on top of the page are called as Local task. you can view them easily on User Log-in page having Log in/ Create an account/ Reset your password

Syntax to define local task in Drupal 8:

First of all, To create a static local tasks we need to define in our module should be static.

 

format: file name after your module.

E.g: if module name is "resume", the file will be resume.links.task.yml & placed in the root directory.

Here resume.links.task.yml define two tabs resume.tab_1 & resume.tab_2 route. the title of the tab will be shown in User Interface tab where base_route is same as the name of the route. we can also provide the weight for the tabs. by default negative weight appears on the left hand side.

Just to Display two quick tab in UI , i have added one additional form “Work Form”

To provide multiple levels of tabs, use the parent_id to relate a tab to its parent and use the same base_route to group the set of tabs together. Above are two quick tab “resume” , ”Work” which can visible while visiting resume/mypage

Conclusion: This tutorial tell us about basics of creating static local tasks[tabs]. by adding resume.links.task.yml in core directory. which required  mandatory route_name / title / base_route fields. & it doesn’t include Dynamic local task generation & Customising local task behaviour.

Source code:  https://github.com/xaiwant/D8custom-form-with-static-local-task