Features Module has played a significant role in deploying site configuration for Drupal 7. If you’ve ever build a site in Drupal 7, then possibly you have worked with the Features Module. However, CMI in Drupal 8 solved a lot of problems that we faced with Features in Drupal 7. In this blog, we will discuss - Why do we need Features Module in Drupal 8? What is the use of it? We will also attempt to export photo gallery feature.

Let’s take a use-case where you are working on a media and publishing company project and your client wants a feature of ‘Photo Gallery’ on his/her website. In this case, you will have to keep a track of following files:
 

• content-type.yml
• my-fields-storage.yml
• view.yml
• image-style.yml
   

So now how we will get to know that Photo Gallery feature comprises only of the above-mentioned files or still there are any more dependencies? 

Is there any way where these files are BUNDLED together? Is there any way where configuration (e.g. adding fields, image style to view) changes related to Photo Gallery feature is auto-detected?

This is where Features Module is used to bundle functionality into reusable modules. That’s main difference between CMI and Features.

Let’s see steps involved in exporting photo gallery feature in Drupal 8

Note: We are installing Feature Module using drush commands.

• Install features module using the following drush command: 

drush en features -y

• Create a content type My Image Gallery having an Image field.

• Create an Image Style, such as My Image Style. See the screenshot below for an example.

• Now create a view of the content type ‘My Image Gallery‘ with the image field.

• Add Image field. Select the Format as ‘Image’ and Style as ‘My image Style’.

• Add Some content and your gallery will look like:

• Now to Export this feature, go to Config>Development>Features.
• Create a bundle to give a common namespace to your feature.

• Ones you create a bundle, Image Gallery View will be auto detected by feature:

• Now click on ‘My Image Gallery’. Add it to ‘xyz’ bundle and click on write.

• It will then create a module in your custom folder by the name ‘xyz_my_image_gallery’.

• You can place the module in any other instance and enable it. The Feature will be installed with all the configurations and we don't NEED FEATURES MODULE on other instances to install and use this module.

Notably, a Feature Module contains additional information in its .info.yml and .feature.yml file to check, update, or revert configuration programmatically.

.info.yml:

.features.yml:

How to decide what to use?

It depends on the use-cases. If you need to export and deploy simple site configuration then you can use Drupal 8 configuration management system instead of Features. Whereas Features in Drupal 8 can be used to export bundled functionality like a photo gallery feature, a blog or press room.

Media and Publishing companies are constantly transforming, and so is development, we, at Valuebound are one of those companies who specifically help organizations in their path to Digital Transformation. We enhance digital experience for end users, with customized web applications. 

Hope this blog will helpful for you to export features programmatically. If you have any doubts or questions, please comment below we will be happy to help you.

Below given is a presentation on Features Module.
 

Reference

https://www.drupal.org/project/features 
https://events.drupal.org/losangeles2015/sessions/features-drupal-8 
https://www.phase2technology.com/blog/announcing-features-drupal-8

We are excited to inform you that Valuebound, Bangalore is conducting a free “Drupal-in-a-day” training session on this Drupal Global Training Day i.e. 16th September 2017, Saturday. The session is an initiative of Drupal Association to introduce newbies to the world of open source platform.

Learn and design your own live Drupal website. The session will be presented by our Drupal 8 expert practitioners and senior Drupal consultants, having years of experience in delivering successful projects. The session will also help you in understanding how CMS can help you in your career building.

Level: Introductory

Duration: 1 Day

Proposed Session

Valuebound Drupal-in-a-day training comprises of various sessions that span over the different stages of designing a live Drupal Website. The session will also focus on teaching you the main features and concepts of Drupal with live practice sessions, terminologies associated with it and different modules. When you will complete this, you will have a moderate-level knowledge of Drupal in designing live websites and selecting modules to get the functionality you want with maximum benefit.

Ideal for...

Whether you're an established professional or new to Drupal, this training session will give you an expertise you need in building your own live website. 

If you are PHP/Web developers, then you would never like to miss this opportunity as it will help you in giving an edge to your career with an additional insight. 

Fresh Graduates can easily learn about CMS that will help them in giving a boost start to their IT career path as a developer. Drupal is widely used by Fortune 500 companies, governments, start-ups and more.

If you are a Career Switcher and planning to change your domain then it is the best time to learn what more is there for you in IT industry.

Project Managers considering Drupal projects can best utilize this training session as it will help in understanding what they should know about the CMS.

Decision Makers can best utilize of the session to evaluate Drupal for building their product on. Explore why it’s the perfect fit for your next project. 

Drupal Training session is for everyone, who is interested in knowing what Drupal is and evaluating or implementing it.

Prerequisite, but not mandate

Starting from scratch may be difficult, but a little knowledge of CMS would be an added advantage. If you have a hand on experience on WordPress, Joomla or HTML, and CSS then it would be great. Else no worries! The training is aimed at training and encouraging newcomers and polish the fresh graduates. This session will present you an outline of Drupal concepts and not an in-depth course.

So what

When you will complete the session, you: 

• Will have your own live Drupal website.
• Will be able to install and configure modules and themes from Drupal.org.
• Can create content and configure content types as well as create listings of content.
• Can easily manage user roles and accounts, as well as aliases and URL paths.
• Can also create blocks and place them in the layout
• Why this training session is free

We believe that the best way to contribute some thing is to share the knowledge within its community and newcomers. Valuebound is an active contributor to the Drupal Community and has achieved the top position in the country and seventh globally. This event is part of one of our efforts to give back to the community.

As a Drupal specialist, Valuebound is dedicated to help organizations and individuals to adopt the platform in their operations effectively. And we believe in giving result oriented training sessions that will help you to build the perfect websites you visualize.

Come and join us! Be part of our Global Community where learning and committing is the key to success. If you have any queries or doubts regarding the session, comment below or contact us.

Final hours: RSVP to register.

Note: Carry your own laptop to make the best use of the session

In last few years, protecting data from an unauthorised use has become a challenging task. Recently, we came across a similar situation while working on a media and publishing industry project where most of the content was used through services. And we were requested to protect the content from unauthorised use and help in stopping such practices. 

Here in this scenario, RESTful Web Services API played a significant role in overcoming the situation. However, in some cases, the default RESTful API doesn’t work effectively and leave the requirement unfulfilled. In this case, we will create a custom REST method that helps you to access nodes using API keys. Let’s see how we can achieve this?

Here we need to deal with two things:

• Create a View to export data with Rest API
• Create a custom Rest method to access  nodes

I guess you would also like to take a look on our previous blogs where we have created Rest Resource for GET Method to enable other websites or applications to view, edit or update information; and Custom Rest Resources for POST methods to create an article in Drupal 8 website from an external application.

Follow the below steps to create a View to export data with Rest API followed by customizing Rest method to access nodes by using the API keys.

How to create a View to export data with Rest API?

Step 1

Select the RESTful Web Services module and download REST UI dependency module. See the screenshot below for an example.

Step 2

After Installing Web services, create a View to export data with Rest API following a few simple steps. Fill basic pieces of information then save and edit to create the REST pages.

Step 3

Go to admin/structure/views and click on Add View Button. Follow the below steps.

• Create a View  named  “article view” 
• In View setting, select the Type Article
• Select the “REST EXPORT SETTING”

Step 4

In View page, you need to

• Select the Serializer formatter

• In Format, click on settings and select json format

• Select Title and Description field

• Expose the Content ID

• In Path Setting, give path /json/article-id

Step 5

Now let’s access the article node in browser using the path given and Content ID.

Example

URL: {Basepath}/json/article-id?nid=6

Now you can test using Rest Client by entering the Url. See the below screenshot.

How to create Custom Rest Method to Access Nodes by using the API keys?

Let’s create a Custom Rest Method to Access Nodes so we can create a custom module. We can also use Drupal Console to create a module.

The module name is “test_api”

See the screenshot below for an example of the folder structure.

Step 1

Create a test_api.info.yml file and enter the following code.

name: Test API

type: module

description: Custom RESTful API module.

author: Sarada Prasad

core: 8.x

Step 2

For the below code to work, we need to create a TestAPIController.php file inside Controller folder.

Here, we are showing Get Method example.

Step 3

Follow the codes to create a routing file test_api.routing.yml file to access the methods.

Step 4

Let’s build a Form APIKeySettingsForm.php inside Form folder to create API Key to access the node.

Step 5

Step 6

You can also access the node with the API key created and test using Rest Client.

{Basepath}/my-api/get.json?nid=5&apikey=helloapi12345

There you have it, now you can test using Rest Client

Customizing Web services programmatically has become a routine task in order to protect the company’s data. In this post, I haven’t covered a lot of basic things and explained how to create and customize Web services. The above-explained process will also help you in securing your client’s data.

Hope this blog will be helpful for you. If I have missed something or you want to add then please comment below. Whether you are Media and Publishing firm or a Drupaler, you can discuss with us the problems you are currently facing or any other service related issue anytime. You are just a click away.

Below given is a presentation on RestFul Web Services in Drupal 8.

Over the past couple of months, I have been facing a similar situation where many developers are unable to set up a local dev box for Drupal 8 on Pantheon server. Pantheon plays a significant role in hosting a website as it has fast set-up to local and best use of drush command to accelerate administrative and development tasks for Drupal sites.

For an introduction to drush command, you can check our previous blog post where we have explained about writing custom Drush commands in Drupal and installing Drupal with Drush. In this post, I will show you how to set up local dev box for Drupal 8. This blog will be helpful for all industry types and individuals, and after completing it you will find yourself at a moderate level of expertise.

Let’s follow the process step-by-step to set up our own local dev box:

Step 1

• To set up local dev box for Drupal 8 on Pantheon server, go to dev environment of given site
• Click on code
• Click on git and copy below command

git clone ssh://codeserver.dev.463157b8-419d-482f-b571-xxxxxxxxx@codeserver.dev.463157b8-419d-482f-b571-3504bb893903.drush.in:2222/~/repository.git nishant-drupal-8

Step 2

• Then go to your web root i.e. /var/www/html/ and paste the copied command

git clone ssh://codeserver.dev.463157b8-419d-482f-b571-xxxxxxxxx@codeserver.dev.463157b8-419d-482f-b571-3504bb893903.drush.in:2222/~/repository.git nishant-drupal-8

Step 3

• Meanwhile, create a database for the site in local

mysql -u root -p

Enter the administrator password you set-up during installation

CREATE DATABASE drupal8;

Step 4

• Download the Pantheon Drush alias from Pantheon Dashboard (https://dashboard.pantheon.io) and place that file to .drush folder

i.e. /home//.drush/

• Place below code in .drush folder file name as local.aliases.drushrc.php

--------------------------------------------------------------------------

Step 5

• After clone is done, go to /var/www/html/nishant-drupal-8/sites/default/
• Create new settings.local.php should be an settings.local.php of Drupal 8 Note: Add below code snippet

Step 6

• Create files folder in sites/all/default/
• Give permission to file folder Chmod 777 -R files/
• Go to ./drush folder through terminal and type drush cc drush
• Now on terminal, type drush sa

You will get all local aliases, dev aliases, test aliases and live aliases

Eg:-

@local.nishant-drupal-8 ← local aliases
@pantheon.nishant-drupal-8.dev ← pantheon dev aliases
@pantheon.nishant-drupal-8.live ← pantheon live aliases
@pantheon.nishant-drupal-8.test ← pantheon live aliases

Note: These aliases are important to sync any database and file

Step 7

• How to sync database from dev to local

drush sql-sync
drush sql-sync @pantheon.nishant-drupal-8.dev @local.nishant-drupal-8

Note: Be careful about source destination

Step 8

• How to sync files from dev to local

Drush rsync  

drush rsync @pantheon.nishant-drupal-8.dev:%files @local.nishant-drupal-8 :%files

Note: After syncing files give your files folder 777 permission and clear cache [ sudo chmod 777 -R files/ ].

That’s it. The above set-up is easy for fast development and lets your Pantheon site up on local. Furthermore, these easy to do steps will save a lot of your time in setting up the Pantheon environment to local. Hope you can now easily do it. If you have any suggestions or queries please comment down let me try to answer.

Publishing companies are constantly transforming, and so is development, we, at Valuebound, are one of those companies who specifically help organizations in their path to Digital Transformation. We enhance digital experience for end users, with tailored web applications.

As a Drupal Developer, you must be aware of one of the contributed projects with a most Downloaded number is “Views” What are views? I don’t want to focus more on this, drupal.org gives a broader view of that. 

In Drupal, Views enable you to have a user interface in the browser for creating sections of your website that you would normally have to write an SQL query to retrieve. Views generate a SQL query for you.

You would require view : 

• If you would like to create the default front page view.
• You want taxonomy/term view, but probably in some sort of order.
• You want your posts to be customized
• You want a block with the 5 most recent posts of a particular type.

Like the above, you have many other requirements, which you have achieved using view and supportable View UI.

In this article, I am not going to discuss things like configuration, fields, filter, contextual and filter. These details have already been explained in a previous introductory article about Drupal 8 views.

In this blog, I am going to share something really interesting, that is pipeline or flow of view before it gets rendered to the browser. This would be really helpful with a programmatic execution of certain tasks to be performed. But it’s really necessary to know when, where and how it works? And we will go through Drupal views hooks.

Basic execution order:

1. hook_views_pre_view
2. hook_views_pre_build
3. hook_views_post_build
4. hook_views_pre_execute
5. hook_views_post_execute
6. hook_views_pre_render
7. hook_views_post_render

hook_views_pre_view
Allows altering a view at the very beginning of views processing, before other tasks..
Adding output to the view can be accomplished by placing text on $view->attachment_before and $view->attachment_after.

hook_views_pre_view(&$view, &$display_id, &$args)

Parameters

$view: The view object which is about to be processed.

$display_id: The machine name of the active display.

$args: An array of arguments passed to the view.

hook_views_pre_build
This hook is called right before the build process, but after displays are attached and the display performs its pre_execute phase.
We can add output to the view by placing text on $view->attachment_before and $view->attachment_after.

hook_views_pre_build(&$view)

Parameters

$view: The view object about to be processed.

hook_views_post_build
This hook is called right after the build process. The query has been fully built now, but it has not yet been run through db_rewrite_sql.

Adding output to the view can be accomplished by placing text on $view->attachment_before and $view->attachment_after.
 

hook_views_post_build(&$view)

Parameters

$view: The view object about to be processed.

hook_views_pre_execute
This hook is called right before the execution process. The query has now been fully built, but it has not yet been run through db_rewrite_sql.

Adding output to the view can be accomplished by placing text on $view->attachment_before and $view->attachment_after.

hook_views_pre_execute(&$view)
    
Parameters

$view: The view object about to be processed.

Hook_views_post_execute
This hook is called right after the executing process. The query is now executed, but the pre_render() phase has not yet been executed for handlers.

Adding output to the view can be accomplished by placing text on $view->attachment_before and $view->attachment_after. Altering the content can be achieved by editing the items of $view->result.

hook_views_post_execute(&$view)

Parameters
 

$view: The view object about to be processed.

hook_views_pre_render
The Drupal views pre-render is called right before the rendering process. The query has been executed, and the pre_render() phase has already happened for handlers, so all data should be available.

Adding output to the view can be accomplished by placing text on $view->attachment_before and $view->attachment_after. Altering the content can be achieved by editing the items of $view->result.

This hook can be utilized by themes.

hook_views_pre_render(&$view)

Parameters

$view: The view object about to be processed.
 

hook_views_post_render
Post process any rendered data.

This can be valuable to be able to cache a view and still have some level of dynamic output. In an ideal world, the actual output will include HTML comment based tokens, and then the post process can replace those tokens.

hook_views_post_render(&$view, &$output, &$cache)

Parameters

$view: The view object about to be processed.

$output: A flat string with the rendered output of the view.

$cache: The cache settings.

All the above phases have a generic flow that ‘view’ follows. Altering a view query to get your choice of data or the output which is not feasible to get it from existing views configuration could be very easy by understanding these phases.

Pushing clean codes is not every one cups of tea, it needs extensive knowledge and practice. Before a website go live, it needs to pass certain standards and checks in order to deliver quality experience. Certainly, a clean website is a demand of almost every client and it should be. 

In this blog post, you will learn why we need to implement git pre-commit hook? how it works? Simultaneously, we will also attempt to implement working examples in order to have better understanding.

Why we need to implement git pre-commit hook

Any website going live should pass certain standards and checks. If the web is built on any framework, then these checks are mandatory. How to ensure all developers are committing clean code? One way is to do code review, but this is manual and we can’t ensure all the issues are caught up. Another way is to set up continuous integrations (CI), where we can do these checks as automated jobs. In both ways, we can catch this up soon before pushing the code by any developer using git pre-commit hook.

Do you know git supports hook? A list of supported hooks and sample code can be found in ‘.git/hooks’ directory. You can read more about each git hooks here. In this article, we will explore about git pre commit hook.

How git pre commit hook script works

Whenever a git commit is performed, git pre commit hook script will be executed where we can do syntax check, presence of any debugging function, check for merge conflict tags and framework coding standard in files that are staged to commit. If any case fails then in the script we have to throw an error that is ‘exit 1’. Otherwise just do ‘exit 0’, which means success.

Example

Here, I have created a git pre commit hook example script specifically for Drupal. You can go through the code here: manoj-apare/pre-commit. First, we have to check these standards only on staged files and avoid deleted files, using command ‘git diff-index --diff-filter=ACMRT --cached --name-only HEAD --’. In rest of the article, I will explain what all checks have been covered for these list of files in the script and how.

Syntax check

For checking Syntax, you can PHP linter for compilation errors that is using command ‘php -l’. To run php linter check, we can filter out only php files ‘git diff-index --diff-filter=ACMRT --cached --name-only HEAD -- | egrep '\.php$|\.inc$|\.module|\.theme$'’.

Check for debugging functions

For checking debugging function, we can use grep tool ‘git diff --cached $FILE | egrep -x "$pattern"’. Where $FILE is filename and $pattern is regular expression pattern for debugging functions for example ‘^\+(.*)?var_dump(.*)?’.

Merge conflict marker check

Merge conflict marker can be checked on all files staged to commit using egrep pattern ‘egrep -in "(<<<<|====|>>>>)+.*(\n)?" $FILE’.

Coding standard check

Using phpcs (PHP codesniffer), we can check for coding standards ‘phpcs --standard=Drupal’. No need to check coding standards for some files format like images and fonts. For this, we can filter out staged files with extensions ‘php,module,inc,install,test,profile,theme,js,css,info,txt’.

See the screenshot below for an example of the coding standard check.
 

Finally, using git pre-commit hook we can make sure that we are pushing clean code. I hope this blog will help you out to check coding standards, syntax errors and debugging functions. Moreover, it will also assist you in reducing the number of failing automated tests in CI.

There are scenarios, where you will have a lot of users. In such an instance , if we display all the users in single page, it will mess with the user experience, to scroll through such a long list. By using Drupal pagination we can display the configured number of users in the single page.

In one of the previous blogs, we learnt how to create a Drupal table form, in this blog we will learn about creating the form table with Drupal pagination. When completed and configured with 10 users, the form can look like the below image.

Follow the below steps to create a configured user list with Drupal pagination

Step 1:

Get the data:

The first thing we need to do is to get the data which we will use in our table. This will be entirely dependent on what data it is that you want to show. The table shown above is displaying user info from the database. In this case, by using drupal db_select I’m fetching user detail and creating the array

    As you can see, fetching rows data from the database and putting them in the array format

Step 2:

Build the header The next thing we need to do is put together an associative (keyed) array defining the header of the table. The keys here are important as we will be using them later in this blog. The table we are building here has four cells in the header - one for the checkbox column, one for userid, one for username and another for email. However, we can ignore the cell for the checkbox column, as Drupal will take care of this for us later. As such, we can build our header as follows:

Step 3:

Build the data

Next, we need to build the array that will contain the data of the table. Each element in the array will correspond to one row in the HTML table we are creating. Each element of the array will be given a unique ID. This will be the value of the checkbox when the form is submitted (if selected). In this case, we want to get the UID of the user, so each row will be keyed with the UID of the user. We then, will key the cells of the table with the keys we used for the header.

Step 4:

Form Table

So now we have built a header ($header), and the rows of the table ($options). Create a simple drupal form and bring it all together. Drupal 8 has a nice little theme function that we will use for this, theme_tableselect(). theme_tableselect() takes the data, turns it into a table, adds a checkbox to each row, and adds a 'select all' checkbox to the header. Handy! So let’s look at how to tie this all together:   

That's it. This is a simple table form with the list of user from the database with drupal pagination.

Draggable grid view makes views to be altered and rearranged as drag and drop. This is achieved by using javascript which allows drag and drop on HTML tables. In this blog, I will discuss about an instance where I used the Views Module to manipulate the grid format in Drupal 7.

The process of reordering the views can be done with the help of Drupal draggable  views module. With the help of the module we can easily re-order the table format, but if we want to reorder the  grid format, it requires some modification in the views that is created. In this blog I will be explaining about Drupal grid view which is the view that is visible for the user. 

You can download and install the module using drush commands drush dl draggableviews -y and then drush en draggableviews -y

After downloading and installing the module, the setup for the draggable views module is completed. 

Creating View:

We have to create 2 views , in order to create a re-orderable grid format view. In the first view we will create a view for the table format. It is the format generated when the module is installed then we can create another view of grid format(any format also possible).
To create a view  for the above process of table format, please follow the following  steps

• Go to the link  admin/structure/views/add and create a page view of particular content type
• Save the view and continue to add the format and field section in the view
• In the format section please select the table format and  leave the settings options for the default values

• In the field section add the following fields title, image( please add the field of  a particular content type you want to re-order, I have chosen image field to re-order) and Draggableviews: Content
• Some configuration should be done for the Draggableviews: Content , please click on it and follow the uploaded image

• Now we have to add a sort criteria , the sort criteria field will be updated with Draggableviews: Weight (asc). It can be ascending or descending based on the requirement. Now we have to set some configuration for the field, so please follow the image for the configuration

• Save the view, now we are able to reorder the table format view.

Now we should create a view for the grid format mode. Creating Grid format mode view is similar to table format view. Please follow the below steps to create a view for that.

• Go to the link  admin/structure/views/add and create a page view of particular content type
• Save the view and continue to add the format and field section in the view
• In the format section please select the grid format and  leave the settings options for the default values
• In the field section add the following fields title, image( please add the field of  a particular content type you want to re-order, I have chosen image field to re-order) 
• Now we have to add a sort criteria , the sort criteria field will be updated with Draggableviews: Weight (asc). It can be ascending or descending based on the requirement. Now we have to set some configuration for the field, so please follow the image for the configuration.

In the image there is a field called Display Sort as, we have to set table formatted view name because, this view (grid formatted) will be sort based on the previous view (Table formatted view). Save the view, now you will be able to control the grid formatted display in any order.

After saving the view place the link in menu to see the operation.

• Go to admin/structure/menu/manage/main-menu, to place the menu, I have choosen main menu the user can choose any menu, for placing the menu links.

Output:
The output has some procedures in displaying the view in any order. I will be describing with the help of image for the output. The Drupal drag and drop facility can be achieved for the users using Drupal draggableviews module. 

In the image there is quick edit menu button, if you click on that you will get two options 

• Edit view
• Order View

We have to click on order view , to change the order of the view displayed in the image.

If we click on the order view it will be redirected to the view of table formatted, here we will change  the order of the view, it is a Drupal drag and drop format where the user can change the order of the items, and if order is changed and updated it will be affected in the Drupal grid view format.

Now the order in the view is  E->B-> C-> D-> A in both the images, we can bring the order to A->B-> C-> D-> E , by altering the order in table formatted view.

Reordered image as per the above condition

In the end, now we are able to re order the video of grid format using the draggable views module but the above method can be done only by the admin who has privileges.

As a Developer, I would love to be called a “full-stack” Developer, whose job is not limited only to clean code & bug-free delivery, but also responsible to provide infrastructure, database, back-end code, front-end code and project management ;). I’m sure you won’t be interested in client call and daily stand up call, but this is a part of our work which helps in a successful product delivery as well as client satisfaction. 

Recently, I have moved on from Linux to Windows. You can understand a pain of a Developer when it comes to change your machine from hands-on machine to all new environment machine. It’s all new world with reinstallation of supported tools, drivers, applications that suit to your machine. 

As a Drupal Developer, I do deal with web servers. In this tutorial, I am going to share something that everybody would like to read about and i.e. “Virtual Host with XAMPP”. You must be aware of XAMPP before this tutorial also. XAMPP is a cross platform open-source web server bundle that consists of Apache, PHP, MySQL, & Perl. Anyone, who is new to the development or heard rarely about XAMPP, can visit https://www.apachefriends.org/index.html and download supported version for your machine. 

Why do we need to set up Virtual host ?

Setting up a virtual host allows you to use an alias name for your localhost. We can setup multiple vhost as per our need so that each local website can be accessible through specific name. Virtual address means IP-based, you can use different IP or different name for each IP’s. In other words, let’s say your site resides in "localhost/site1" and you want to load all the assets. There is always an issue when we follow traditional step like creating a folder inside "..\xampp\htdocs\site1". This is the place where we used to place our hosting site in Windows, and always get an issue when they want to fetch any file resides in those directory. In this case, URL becomes "http://localhost:8012/site1/sites/default/files/image.jpg". Due to an invalid path, files become inaccessible and as a result they won’t get loaded in the page.

Using Vhost, you can load from the root of your document without any movement of your site files.

There is nothing wrong on setting up Vhost in your local machine. Using this, you can also set up multi-site that uses wildcard DNS with sub-domain name. 

What I am running on:
I am running latest version of Xampp server with Windows 7 32-bit operating system. XAMPP having Apache 2.4.25, PHP 7.1.4, MySQL 5.0.12

How can we achieve:
Here we need to deal with three important files
1.    Host file
2.    Httpd.conf file
3.    Httpd-vhosts.conf file

Step 1: Let me start with httpd.conf file, which is apache configuration file. By default httpd-vhosts.conf becomes comment out in Ubuntu as it doesn’t uses. But in Windows, it uses vhost file, so we need to tell apache to include vhost file. If you find codes like below, then remove the comment (#) and save the file.
 

# Virtual hosts
#Include conf/extra/httpd-vhosts.conf

To 

# Virtual hosts
Include conf/extra/httpd-vhosts.conf

Location: C:\xampp\apache\conf\httpd.conf

Step 2: Create a virtualhost file. 
To create a virtualhost for your website, you need to push your code to the httpd-vhosts.conf file.

          ServerAdmin webmaster@localhost.com
         DocumentRoot "C:/xampp/htdocs"
         ServerName localhost

As you can find in the above code, I have included DocumentRoot and ServerName inside the virtual-host tag. Unlike the major tag, there are many other tags available. And you can use them as per your requirement.

    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "C:/xampp/htdocs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www. dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error.log"
    CustomLog "logs/dummy-host.example.com-access.log" common

As you can see in the above code, we have ServerAdmin, DocumentRoot, ServerName, ServerAlias, ErrorLog, CustomLog. 

ServerAdmin:
Description:    Email address that the server includes in error messages sent to the client
Syntax:    ServerAdmin email-address|URL

ServerAlias:
Description:    Alternate names for a host used when matching requests to name-virtual hosts
Syntax:     ServerAlias hostname [hostname] ...

ServerName:
Description:    Hostname and port that the server uses to identify itself
Syntax:    ServerName [scheme://]domain-name|ip-address[:port]

DocumentRoot:
Description:    Directory that forms the main document tree visible from the web
Syntax:    DocumentRoot directory-path Location: C:\xampp\apache\conf\extra\ httpd-vhosts.conf

Below is my machine code:

    ServerAdmin webmaster@xai.com
    DocumentRoot "C:/xampp/htdocs/site1"
    ServerName site1
    ServerAlias site1
    
             Order allow,deny
        Allow from all
   

In a similar way, you can add many virtualhost for your local web directory. In my case, port no is 8012. Please do change accordingly.

    ServerAdmin webmaster@site1.com
    DocumentRoot "C:/xampp/htdocs/site1"
    ServerName site1
    ServerAlias site1


    ServerAdmin webmaster@site2.com
    DocumentRoot "C:/xampp/htdocs/site2"
    ServerName site2
    ServerAlias site2


    ServerAdmin webmaster@site3.com
    DocumentRoot "C:/xampp/htdocs/site3"
    ServerName site3
    ServerAlias site3

 

Step 3: We are almost done. As we have made changes in httpd.conf and httpd-vhosts.conf files please save it. Now, it’s time to tell the browser how to handle your new servername. In Windows, host files located in C:\Windows\System32\drivers\etc\hosts 

127.0.0.1       localhost
127.0.0.1       site1.local
127.0.0.1       site2.local
127.0.0.1       site3.local
………………….
 

Like above, you can add as many as you create a new mapping for your local website.
Now, Restart your Apache and visit the site using URL. "http://site1:8012" , "http://site2:8012"  "http://site3:8012"

Related

Drupal 8 installation in Windows with XAMPP

Create Apache2 Virtual Host

It was a fine Saturday morning when we Valuebound started for Woods Resort, Bangalore for team outing. Soon after reaching the Resort, we were welcomed with great energy and delicious south Indian breakfast by Resort staff. During our breakfast, we met Anthony Raj and Roopa Karthi from event planning firm, Ice Bucket Events.

“Rum Pom Pom, Guli Guli Guli, Olla la la la layo” - so you must be thinking what it is? Well, this is an African Tribal song, and we danced on this which acted as an icebreaker. The very first fun-filled activity for warm up.

With this, the list of activities started with forming three different units, named on American science fiction characters - Iron Man, Hulk and Wonder Woman. The leader of the team has to pick individuals based on three criteria - strength, beauty and intelligence. And it didn’t stop there, nominated candidates had to perform the given tasks. This activity was focussed on how we should cope up with the available resources in an organization.

Well, there were a number of activities throughout the day, however, it ended with dance on African tribal music, where each of us had to perform a unique step. The last activity had a strong, reminding every individual is different and able to solve the problem in their own unique way. 

Here is the list of quick snaps

The tiring, cumbersome physical activities ended with the dance on African tribal songs, which is known for increasing self-confidence and problem-solving skills. The activities were followed by delicious lunch buffet. And yes! We ended up in the swimming pool to relax, and after that rain dance, discotheque and finally hi tea. Below you can find a few glimpse of pool and discotheque too.

Not to mention, going for a team outing is the best thing to have some fun and a great way to relax and chill out from a regular life. It also gives new joinees an opportunity to know their colleagues outside of the office. And we are all set for the next trip.