Showcases the most useful Drupal hooks and functions. Demonstrates their powerful and beautiful interactions. Uses a custom chart block to illustrate the synergy of functions.
Powerful Google developer tools for immediate impact! (2023-24 C)
The Synergy of Drupal Hooks/APIs (Custom Module Development with ChartJS)
1. The Synergy of Drupal Hooks/APIs
Custom Chart Block
Engr. Ranel O. Padon
Drupal Summer Camp PH 2015
2. About Me
• Software Engineer at Kite Systems (Hong Kong-based company)
– full-time Drupal developer for CNN Travel (our client)
• part-time Python lecturer in University of the Philippines
• involved with programming for 9 years (Python, Java, etc)
• involved in Drupal for the last 3 years
• projects: http://github.com/ranelpadon
• plays football/futsal
4. Drupal Hooks/APIs
• There is beauty and synergy in Drupal functions.
• Synergy
the interaction of elements that when combined
produce a total effect that is greater than
the sum of the individual elements, contributions,
etc.
5. Drupal Hooks/APIs
• Individual Drupal functions are boring and
not that useful, but their combinations
are interesting and very powerful.
6. CNN Travel Blocks
• if you go to the CNN Travel site:
http://travel.cnn.com
you’ll notice that we have so many blocks in the
front page
• blocks add valuable information to the site and
creates more visual interest to your page
• recently, we’ve implemented a block that features
our partner hotels
11. Learning Curve
In the beginning of any learning, while you're on the long,
flat part of the curve, you put in great amounts of time
and effort, but see little in the way of results.
Persistent practice helps you move along the learning
curve until you hit that sweet spot—about 80% of the
way into the process—where the curve starts to rise
sharply, and results come easily.
http://bruceelkin.hubpages.com/hub/10-000-Hours--The-Awesome-
Power-of-Practice
12. Learning Curve
in most field of learning (sports, programming, music,
etc), there are many tutorials/exercises about the basic
skills, but relatively few about the ‘intermediate’ skills
this presentation will try to fill the knowledge gap for
Drupal devs by exposing some of the most useful
functions
partner hotels block is an interesting block and a good
Drupal development exercise since its implementation
involves lots of Drupal hooks/functions
13. Learning Curve
• there are 403 hooks in Drupal 7 core alone and
hundreds/thousands of related/utility functions
• but you only need a handful of them to be productive
• knowing 10-20 of the most useful functions could
boost your productivity
• I’ll showcase the value of some of the Drupal
functions/use cases by creating a simpler and related
version of Partner Hotels block
25. Hook_Block_Configure
• to make the block contents editable in Admin UI,
we could use the hook_block_configure().
• but we need a persistent storage/table for its contents
• we could use the handy Variable table built-in
in Drupal
26. Variable table
there are 29 variables
by default in
Drupal 7.37
maintenance_mode is
just inserted for demo
of this presentation
27. Variable table
• we could easily manipulate values in
the Variable table, without using SQL directly:
OPERATION
DRUPAL FUNCTION
Create/Update
variable_set()
Read
variable_get()
Delete
variable_del()
35. Charts
• we’ll use the ChartJS since it’s open-source,
simple to use, has clean syntax, and mobile-friendly:
http://www.chartjs.org/
36. ChartJS Page
• include the ChartJS script
• create a CANVAS element in a page
• set the input data
• convert the CANVAS element to a chart object
against the input data
37. ChartJS Page
• include the ChartJS script
• select version from here:
• https://cdnjs.com/libraries/chart.js
• latest version:
• https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js
44. Chart Block
• how do we display a chart in a Drupal block?
• we need to satisfy these conditions again:
• include the ChartJS script
• create a CANVAS element in a page
• set the input data
• convert the CANVAS element to a chart object
against the input data
45. Chart Block
• we’ll focus first on the input data
• we need a JSON data from Drupal
• we’ll create 3 articles and broadcast them as
JSON objects
46. Data Source: Create 3 Articles
• Article 1
– Tags: ‘alpha’
– Body: ‘Lorem Ipsum 1’
• Article 2
– Tags: ‘beta’
– Body: ‘Lorem Ipsum 2’
• Article 3
– Tags: ‘alpha’
– Body: ‘Lorem Ipsum 3’
47. EntityFieldQuery API
• create a helper function to retrieve the articles
• we’ll use the powerful and flexible EFQ API
49. Hook_Menu | JSON Output
• bind the function to a menu
• encode the _get_articles() output to JSON
• set the access permission to use
50. Hook_Menu
• Make sure to clear the Drupal cache to register
and activate the newly created menu
51. • the JSON data will
now be accessible
• you might want to
use Chrome’s
JSON Formatter
52. Hook_Block_View | #Markup
• insert a CANVAS element
• convert ‘content’ to array structure
• insert a ‘#markup’ property/array key
• set the block markup
53. Hook_Block_View | #Attached
• insert the ChartJS script
• attach a new JS file to the ‘content’
• set the JS data/src
• set the data as external script
54. Drupal Behaviors | Driver File
• implement the ChartJS driver file
• create a new Drupal behavior,
define the ‘attach’-mode function
• let’s use first the previous, non-Drupal
sample chart codes
55. • implement the ChartJS driver file
• attach a new JS file to the ‘content’
• set the JS data/src
• set the data as a local file
56. Hook_Block_View | #Attached
• insert the ChartJS driver
• attach a new JS file to the ‘content’
• set the JS data/src
• set the data as a local file
58. Drupal Behaviors | Driver File
• adjust the ChartJS driver
• fetch the Articles JSON as the input data
• convert the chart renderer to a function
• will be used in a JSON function callback
59.
60.
61. Chart Block | Articles
• the articles’ JSON data will now be rendered
62. Injecting JS | #Attach
• note that the main advantage of #attach compared
to drupal_add_js() is that they are ‘alterable’
since they are inserted as array elements
• same justification applies for drupal_add_css()
• #attach is also used in Drupal 8.
• you could alter the #attached JS/CSS files
using hook_js_alter() and hook_css_alter()
63.
64. Creating an Admin Page
• there are times you’ll need to have some admin page
for inputting custom site settings/configurations
• for instance, you’ll like to control if you would like
to show the chart labels, have an text field entry for
the chart colors or highlight colors, a way to select
the chart type, a way to use other chart script, and
so on.
65. Creating an Admin Page
• use case: we want to select the chart type to display
• the user could choose to display a Pie or Doughnut
chart
66. Creating an Admin Page
• requires a hook_menu that will call a page element
generated using Form API
• input site/form data could be saved in the Variable
table using the handy system_settings_form().
79. SummerCamp Module Repo
• I’ve already implemented the repo in GitHub and
added more blocks and features:
• https://github.com/ranelpadon/summercamp
• showcases ChartJS, Panoramio API, and GitHub’s
Gist API.
• implements blocks using theme function and
template file
• demonstrates processing JSON data in back-end
and front-end
• and more..
82. Recommendations
• Drupal Development Books
• Master Drupal 7 Module Development by Wadman
• http://befused.com/master-drupal/
• Drupal 7 Module Development
by Butcher, et al.
83. Special Thanks
• CNN Travel (http://travel.cnn.com) for the
ideas and inspiration for this presentation.