planet drupal

Headless Drupal Web App with Angular JS and DrupalGap

In this tutorial (for NYC CAMP 2015) we'll explore how to use Drupal 7 and DrupalGap 2 (powered by Angular JS) to build a decoupled ("headless") web application for Drupal. In a nutshell, here is what the app will do:

  1. A user runs the app in their browser
  2. The browser asks the user for access to their current location
  3. The app passes their location to Drupal
  4. Drupal will return nearby content (if any) to the app
  5. The app will display the locations on a map and let the user click on them to see more details

Ready? Let's rock and roll, no time to fiddle...

Headless Drupal with Angular JS and Bootstrap - Hello World

This tutorial describes how to build a very simple de-coupled Drupal web application powered by Angular JS and Bootstrap. The inspiration for writing this tutorial came after completing my first Angular JS module (angular-drupal), which of course is for Drupal!

To keep things simple, and in the spirit of "Hello World", the application will let us login using credentials from the Drupal website, and then say hello to the user upon successful login.

The complete code for this example app is available here: https://github.com/signalpoint/headless-drupal-angular-bootstrap-hello-w...

Ready? Alright, let's go headless...

DrupalCamp Michigan 2015

Let's get together for DrupalCamp Michigan 2015. This year the camp will be hosted at Henry Ford College in Dearborn, MI on Saturday January 31st. Please visit the camp's website for more details:

http://2015camp.michigandrupal.com/

Tickets are only $15.00, The deadline for session proposals is January 11th, and sessions will be chosen on the 12th. JetBrains will be giving away 3 personal PHPStorm licenses at the camp, so be sure to attend for a chance to win.

We hope to see you there, cheers and happy coding!

Build a Mobile App to Geo Locate Nearby Places with Drupal

In this tutorial (for DrupalCamp Ohio 2014) we'll explore how to build a mobile application and website that can geo locate places near our current position. The nearby location results will be displayed on a map, and will allow us to click on a result item to view its complete details.

The website will be powered by Drupal 7. The mobile application will be built using DrupalGap, which is powered by PhoneGap and jQuery Mobile. Let's get started!

Drupal Commerce Order Owner Autocomplete with E-mail Address

When creating an order as an admin in Drupal Commerce, we can specify the user that owns the order if we know their user name. This works well in most cases, but to be able to search by the user's e-mail address would be helpful too. I've had a few requests from clients for this feature. So without further ado, let's ado it!

/**
 * Implements hook_menu().
 */
function my_module_menu() {
  $items = array();
  $items['my_module/commerce/order-owner/autocomplete'] = array(
    'page callback' => 'my_module_commerce_order_owner_autocomplete',
    'access arguments' => array('configure order settings'),
    'type' => MENU_CALLBACK
  );
  return $items;
}

/**
 * Implements hook_form_FORM_ID_alter().
 */
function my_module_form_commerce_order_ui_order_form_alter(&$form, &$form_state, $form_id) {
  // Attach our custom autocomplete to the order owner name input so we can
  // search by e-mail address.
  $form['user']['name']['#autocomplete_path'] = 'my_module/commerce/order-owner/autocomplete';
}

/**
 * Queries results for the commerce order owner autocomplete.
 */
function my_module_commerce_order_owner_autocomplete($string) {
  $matches = array();
  $query = db_select('users', 'u');
  $query
    ->fields('u', array('uid', 'name', 'mail'))
    ->condition(db_or()
      ->condition("u.mail", '%' . db_like($string) . '%', 'LIKE')
      ->condition("u.name", '%' . db_like($string) . '%', 'LIKE')
    )
    ->condition('u.uid', 0, '<>')
    ->range(0, 10);
  $results = $query->execute();
  foreach ($results as $row) {
    $key = "$row->name";
    $matches[$key] = "$row->name - $row->mail ($row->uid)";
  }
  drupal_json_output($matches);
}

Drupal User Entity Reference Field with Custom Autocomplete that uses an Address Field

User reference fields (aka entity reference fields) are great. As you may have guessed, we can use these fields to reference users on other entities (e.g. nodes).

Say we had a user reference field on the Article content type... by default, when selecting a user to reference, we could configure the field widget to be an autocomplete. This allows us to begin typing the user's login name as a way to reference them. This works well in most cases.

What if we had an address field on our user entities, and collected the user's first and last names? It may be more usable for site administrators to be able to search across the user's actual name instead of their user name for logging in.

We can use hook_menu(), hook_form_BASE_FORM_ID_alter(), and a custom callback function to provide a custom autocomplete widget that searches across our address field's values instead...

Build a Mobile App to Sell Products with Drupal

This tutorial describes how to create a website and mobile application to sell physical products. Customers on a desktop or laptop computer will be able to purchase the product through the website, much like a typical e-commerce store.

Once we have built the mobile application, customers who have downloaded and installed the mobile app onto their Android or iOS (iPhone, iPad) device will be able to purchase the product as an In-App Purchase.

For this example website and mobile app, we're going to sell bottles of beer. *Cough* - Please don't actually sell beer without first getting permission from your local Big Brother.

The main 3 sets of tools we will utilize are:

This tutorial was inspired by this Session from DrupalCon Austin 2014. If you're new to any of these tools mentioned above, please watch the video for an introduction. Otherwise, let's get started!

Drupal - Services CSRF Token with FireFox Poster

With the introduction of the CSRF Token a few months ago, service calls in Drupal need to pass along that token for certain resources. Using FireFox Poster, we can pass along this token to easily test and debug our services.

Here's an example to pass along the token for a simple article node creation.

Build a Mobile App to Geo Tag a Photo

In this tutorial we'll explore how to build a mobile application that can take a photograph and save it onto a website with the current latitude and longitude coordinates.

The website will be powered by Drupal 7. The mobile application will be built using DrupalGap, which is powered by PhoneGapjQuery Mobile and Drupal Services.

Did I mention all of this can be accomplished by writing zero lines of code? Well then, let's get started!

Build a Pebble Application to Record a Geo Location in Drupal

This tutorial describes how to build a Pebble "smart watch" application for a Drupal website using the PebbleKit Javascript Framework.

The application itself will be fairly simple. It will wait for you to click the "Select" button on the Pebble watch. Once the button is clicked, the app will grab your current latitude and longitude coordinates. It will then use the Services module to create an Article node and save the coordinates onto a Geofield on your Drupal site.

Let's get started!

Pages

Subscribe to RSS - planet drupal