Drupal Coding standard (Drupal and DrupalPractice) Setup

Drupal Coding standard (Drupal and DrupalPractice) Setup

phpcs   November 28, 2021

 Hello Drupalers,

Hope all are good and healthy.

Today we are going to discuss about how we can keep our code according the Drupal coding standard. While we write any code we keep logics according the functionality but its also important to write code according the standard.

Now Question is how we can check our code is according to standard or not. So in Drupal we usually check according the Drupal and DrupalPractice Coding Standard.

First we have to install and setup phpcs and phcbf in our local repo.

 composer create-project drupal/recommended-project drupal_contrib  
 composer require drupal/coder dealerdirect/phpcodesniffer-composer-installer  
 vendor/bin/phpcs --config-set installed_paths vendor/drupal/coder/coder_sniffer/  
 vendor/bin/phpcs -i  

 

we have to run all phpcs commands from vendor/bin/phpcs because we are setting up standards with local repo.

after setup Drupal and DrupalPractice standard install need to check the installed version.
To check installed version run 

The installed coding standards are PSR2, Squiz, PSR1, Zend, MySource, PEAR, PSR12, Drupal, DrupalPractice and VariableAnalysis

That's it if you find the Drupal and DrupalPractice in installed version you can use the to check your code accordingly.

Commands to check code according the Drupal Standard.

 vendor/bin/phpcs --standard=Drupal web/modules/contrib/<Module_name>  
 vendor/bin/phpcbf --standard=Drupal web/modules/contrib/<Module_name>  
 vendor/bin/phpcs --standard=DrupalPractice web/modules/contrib/<Module_name>  

Check deprecation and Make your project Drupal 9 compatible

Check deprecation and Make your project Drupal 9 compatible

drupal-check   March 20, 2020

Hello Drupalers,

As we know Drupal 9 will be release at 3rd of june 2020.

Drupal 9 = Drupal 8 - remove deprecation + increase dependency package

you are here because you also want to know ->

• How we can make our project Drupal 9 compatible ? 
• How we can check deprecated code ?

Drupal-check :- We can check all deprecated method using the "drupal-check".


Drupal check will provide you a result based on your project which deprecated method you used in your code and in the place of that code what should we should.


Install Drupal -check : - Download package using below command

 curl -O -L https://github.com/mglaman/drupal-check/releases/latest/download/drupal-check.phar  
 mv drupal-check.phar /usr/local/bin/drupal-check  
 chmod +x /usr/local/bin/drupal-check  

Composer :-
You can install this in your project using Composer as a development dependency like so:

 composer require mglaman/drupal-check --dev  

You can also install this globally using Composer like so:

 composer global require mglaman/drupal-check  

 Check Deprecation :- Now your system is ready to check any Drupal check with deprecation then you can make the project compatible with Drupal 9

If you installed drupal-check locally, open your terminal and run below command.

 lenovo@lenovo-ThinkPad-L450:/var/www/html/drupal_directory $ vendor/bin/drupal-checck web/modules/contrib/module_name  

If there is any error you will be able to see result like :-

  21   Call to deprecated function db_select():                  
      in drupal:8.0.0 and is removed from drupal:9.0.0. Instead, get       
      a database connection injected into your service from the container and   
      call select() on it. For example,                      
  ------ -------------------------------------------------------------------------  
  [ERROR] Found 1 errors  

Now you can remove deprecated code and make its Drupal 9 compatible.

How Drupal will know your project Drupal 9 compatible ?

Here is a way to let know Drupal.org that our module is Compatible with Drupal 8 and Drupal 9

 core_version_requirement: ^8 || ^9  

Add this line in your project info file. If want to know more about core_version_requirement see core_version_requirement



I hope guys you like this, if you have any suggestion and correcction feel free to comment here. Thanks 😊

How Drupal Core release version decides ?

How Drupal Core release version decides ?

Drupal8   March 19, 2020

Hello Drupalers,

There is one interesting thing about Drupal version.

Have you ever been thought how core contributor decided the Drupal release number ? 🤔


Today i am going to tell you how the core release version decide.

"Since Drupal 8.8.0 Core release follow the semantic versioning (semver) numbering system."

• Semantic versioning numbering uses three numbers instead of two  i.e (8.2.6)

In 8.2.6 first number is the major release number, second is minor number and third is patch number .

First Number (Major version) :- You are actually breaking API , there's no backwards compatibility with old API.

Second Number (Minor version) :- Minor version does not break compatibility with old version (Drupal 8.2 won't break compatibility of 8.1), This number is used for big changes or new feature.

Third Number (Patch Number) :- last number only shows bug fixes.

For more information please visit :-  Drupal Core release cycle

"Most Welcome any suggestion and correction in blog".

Thanks 🙂

Headless drupal 8 with vue js

Headless drupal 8 with vue js

headless drupal   March 19, 2020

Hello Drupalers,

Today i am going to show you how can create headless website with  Drupal 8 and vue.



We will step by step to create headless website.

Step 1 : -  Install a fresh Drupal 8.  In my case i  installed drupal with composer .

 composer create-project drupal-composer/drupal-project:8.x-dev decoupled_drupal --stability dev --no-interaction  

Step 2 : - In this case we will use rest api to get  drupal content data in our vue app using "REST Module."


Step 3 :-  Create custom content type as  i have created content type "Album" and added some fields











Step 4 :- create view for rest export data.

 make sure your api path (i.e api/edm-album)


Note : Now Drupal is ready for headless use now we will create vue frontent to get this api data and will dispaly on frontent.



Step 5  :- Inside of your Drupal folder install Vue-cli wo we can use

 lenovo@lenovo-ThinkPad-L450:/var/www/html/decoupled_drupal/drupalvue $ sudo npm install -g vue-cli  

Step 6 :-  Setup Vue instance for headless use

 vue init webpack <name_of_project folder>  
 # install dependencies and go!  
 cd <name_of_project folder>  
 //install node dependencies from package json  
 npm install  
 // run this command to start your project  
 npm run dev  

Last command is used for serve react application and after that you will be able to see some url like

http://localhost:8080/


make sure you are running above commands from your drupalvue directory.

Customization in drupal 8 core contact form using form alter

Customization in drupal 8 core contact form using form alter

Theme   November 17, 2018

How to change Drupal 8 Core Contact form fleld label :-

 If you want to change Contact form "Message" field label you can use "hook_form_alter" .

either you can create a custom module or either you can add form alter in your theme file also.

 

function your_theme_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
       if ($form_id == 'contact_message_feedback_form') {
        $form['message']['widget'][0]['value']['#title'] = t("My Custom Body Label");
     }
} 

Add placeholder in default search using form alter

function your_theme_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
    if (in_array($form_id, ['search_block_form', 'search_form'])) {
        $form['keys']['#attributes']['placeholder'] = t('Search...');
    }
   }if ($form_id == 'contact_message_feedback_form') {
  $form['actions']['submit']['#value'] = t("My Altered submit button text here");
  $form['subject']['widget'][0]['value']['#title'] = t ("My Altered title here");
  $form['message']['widget'][0]['value']['#title'] = t("My custom body text here");
        //$form['message']['widget'][0]['value']['#title'] = t("My Custom Body Label");
  $form['#suffix'] = "<div class='extra-text'><p>Show some text before the comment form.</p></div>";
     }

} 

Create Instances at AWS (Amezon Web services) and connect through SSH.

Create Instances at AWS (Amezon Web services) and connect through SSH.

Ubuntu   November 02, 2018

Step 1: Login your AWS Account.

Step 2: At the navigation click on services, and select "EC2".

Step 3 : If you want to create new site or application or Instance, you need to click on "launch Instances".

Step 4: There is a option for free and paid server for creating instances. ("Choose an Awazon Machine Image (AMI)")

Note : Amazon web services provide you 8 TB space if you want more than it you need to select paid server.

Step 5 : Go through all the steps, there is a option of create key pair, it will use to connect your AWS website with ssh, but remember on thing you can create a pair key only one time and if another user want to access this folder you have to share your pair key.

eg. test.pem file



Step 6 : Connect instances using ssh and pem file

download your pem file and put this at your desktop and connect through ssh username and password.

Step 7 : you need to give the permission of your pem file to read and write.

$ chmod 400 test.pem


Step 8 : SSH Command :

ssh -i YOUR_PEMFILE.pem user@publicdns/domainname

ex - ssh -i xyz.pem ec2-user@ec2-45-415-458.compute-1.amazonaws.com

 
Step 9 : Now you will connect to your AWS Account :)

Step 10 : At AWS account click on your instances, below you will find description tab under that public DNS(IPv4)  ec2-45-415-458.compute-1.amazonaws.com, click on that link you will redirect your web page of your instances.

How to Change 'Any' option in exposed filter in Drupal 8.

How to Change 'Any' option in exposed filter in Drupal 8.

Drupal8   October 29, 2018

If you Want to Change label of "Any" in exposed filter option in Drupal 8. You can use "Better exposed filter" . here thesome step to change of Any text in D8.

Step 1 : Open your Better exposed filter setting and find out the filter in which you want to change the label.

Step 2: Scroll down at the bottom select  "More options for "field_ad_category_target_id(your filter name)".


Step 3 : Click on "Rewrite filter options"


Step 4 : put this in "Retrite the text option"

 example : - Any -| Your option

Step 5: in my case i want to change "Any" label to 'Your option'. i hope this will work for you :)

My trick to add Colorbox popup on Slideshow images in Drupal 8

My trick to add Colorbox popup on Slideshow images in Drupal 8

Drupal8   October 24, 2018

Hello, If you want to show any slider image in the popup form on click on image
here is the my funny or easy trick to do it. i hope it will work for you :)

Trick 1 :-  I have a task that i have created a slider using image fieldslideshow , i have done this by using view and just set image formatter as image fieldslideshow but now requirement is that when we click on the image it should be open as colorbox popup.


solution : -
   step 1 :- I have added a same image field in view and set formatter "colorbox" and excluded that filed, its all because shwo we can found colorbox library on required page.

step 2 :-  just change twig file structure according colorbox :-

From :-

{% for key,value in url %}
            <img src="{{ value }}" />
        {% endfor %}


To :-

{% for key,value in url %}
    <a href="{{ value }}" class="colorbox cboxElement"><img src="{{ value }}" /></a>
    {% endfor %}

Step 3 :- Now you will be able to see popup on your slider image

 

Trick 2 - Need to add popup on field slide show image.

Step 1:- i have set filed slideshow on display format of image and link image to file.

Step 2:- create a other image field to and set Colorbox format to call Colorbox library, set a default image in this field, disable from disaplay form, and just add Css for display none.

Step 3 :- there is same structure which we want for colorbox popup except colorbox class so i have  added class using jquery

jQuery('.field--name-field-product-image .field-slideshow').find('a').addClass('colorbox cboxElement');

 

How to Show all products and node related to the node user

How to Show all products and node related to the node user

Drupal8   October 24, 2018

When we click on the node or product and you want to show show all the products related to the user who publish the current user. you have to apply filter user id filter i am showing you in the below post.


Step 1 : - Firstly you have to change the "url alias" for the node and need to add author name.

eg. if you have product content type your path pattern should be like              
 ( [node:title]/[node:author] ) this.

path pattern:- [node:title]/[node:author]

Step 2 :- You Need to add "user Name" contextual filter in the view block.
if your url link this ->  
http://115.166.142.238/souq_alhrag/ar/samsung-galaxy-j2-core/customer

http://<ip>/<projectname>/<language>/<nodeid>/<username>

select raw value under "Provide default value"and path alias 2 in my case.

Exclude current Node in Block view in Drupal 8

Exclude current Node in Block view in Drupal 8

Drupal8   October 24, 2018

If you want to exclude current node and product in block view in drupal 8 pls follow the below steps.


Step 1 :-  Create a block view.

Step 2 :-  Add Content Under "Contextual Filters", select "Provide Default value"->"Content Id from url"

Step 3 :- Scroll Down at bottom and Check "Exclude" under "More".

 

 

Step 4 :- Apply filter and save changes , now only content id which is the url doesn't show in the block view.

How to Add Popup using jQuery

How to Add Popup using jQuery

jQuery   October 23, 2018

Add popup on any div using jQuery :-

HTML : -

<div class="disclaimer custom-popup">
    <div class="container">
        <div class="close">X</div>
        Lorem Ipsum is simply dummy text.
        </div>
    </div>
<div class="disclaimer-show">Disclaimer</div>

JQuery : -

jQuery(document).ready(function(){
    /*Disclaimer popup*/
jQuery('.disclaimer').hide();
jQuery(".disclaimer-show").bind('click', function () {
    jQuery(".disclaimer").show();
    jQuery(this).hide();
})

jQuery('.close').bind('click', function () {
    jQuery('.disclaimer').hide();
    jQuery('.disclaimer-show').show();
})

});

CSS : -

.custom-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.85);
    z-index: 9999;
    overflow: auto;
    padding: 25px;
}
.custom-popup .container {
background-color: #fff;
    max-width: 1170px;
    margin: 50px auto;
    border: 1px solid #0098DB;
    padding: 30px 50px;
    position: relative;
}

.custom-popup .close {
    width: 32px;
    height: 32px;
    background-color: #0098DB;
    text-align: center;
    color: #fff;
    font-size: 22px;
    position: absolute;
    right: -15px;
    top: -15px;
    line-height: 32px;
} 

 

Add Node as a popup in Drupal 7

Add Node as a popup in Drupal 7

Drupal7   October 23, 2018

How to Show Any Node in the popup form in Drupal 7 :-

If you want to Show any node or page in the poup form when click on the link add the link in this format in your block.

 <div><a class="colorbox-node colorbox-node-gallery" href="/disclaimer?width=600&height=600" rel="gallery">My Popup Example</a></div>  

How To Translate Read more text in Drupal 7

How To Translate Read more text in Drupal 7

Drupal7   October 22, 2018

Translate Read More link in drupal 7 : -

under config->translate interface click on translate tab, then select "Read More" string in string search.

 click on edit and then put your required string in required language.

 path : yourdomainname/admin/config/regional/translate/translate