The document is a presentation by Ranel O. Padon discussing the synergy of Drupal hooks and APIs utilized in building an effective chart block for CNN Travel. It covers various concepts, including the learning curve in Drupal development, the implementation of blocks using hooks, and the integration of Chart.js for rendering charts. The author emphasizes the power of combining individual functions and provides resources for further learning and tools for effective Drupal development.

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

3. Coverage/Use Cases
• Block API: create, enable, display, update, save
• Form API: textarea, select list, checkbox, textfield
• variable_get, variable_set, variable_del
• EntityFieldQuery API
• hook_menu, drupal_get_form, system_settings_form
• JSON menu callback: drupal_json_output
• Render API: #markup, #attached
• drupal_get_path
• Extending Drupal Behaviors (attach function)
• Drupal.settings JS object

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

7. CNN Travel Partner Hotels

8. CNN Travel Partner Hotels

9. Drupal Learning Milestones

10. Typical Learning Curve

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

14. Summer Camp Module
• summercamp
• summercamp.info
• summercamp.module

15. Summer Camp Module
• Info Files
• contains metadata/info about the name
description, version, package/group, etc of
the module

16. Summer Camp Module
• Info Files
• similar to php.ini file
• comments preceded by a semicolon (;)
• more details: https://www.drupal.org/node/542202

17. Summer Camp Module
• summercamp.info
• name and core version
are the minimum info needed

18. Summer Camp Module
• summercamp.module
• contains PHP/Drupal variables/functions/hooks
• more details: https://www.drupal.org/node/1074360

19. Summer Camp Module
• summercamp
• summercamp.info
• summercamp.module
• the module could now be enabled in admin/modules page

20. Implementing a Block
• Register: hook_block_info()
• Display: hook_block_view()
• Update: hook_block_configure()
• Save: hook_block_save()

21. Hook_Block_Info
• summercamp.module
• register a new block, enable it, assign to right sidebar

22. Hook_Block_Info
• the block will now appear in block admin page

23. Hook_Block_View
• summercamp.module
• if the currently passed/processed block is our target,
set its Title and Contents

24. The Rendered Block
• the block will now show in the right sidebar. J

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()

28. Variable table
• variable_set(NAME, VALUE )
• variable_get(NAME, DEFAULT_VALUE)
• variable_del(NAME)

29. Variable table
• Variable table is very valuable
• There’s an Easter Egg in Drupal.org J
• https://www.drupal.org/files/my_tombstone.jpg

30. Hook_Block_Configure
• we need a way to edit the block contents

31. Hook_Block_Configure
• editing the block contents is now possible, but
changes will still not be saved.

32. Hook_Block_Save
• we’ll use the another hook to save the edits

33. Hook_Block_View
• and adjust the hook_block_view to make use
of the saved content

34. Hook_Block_Save
• edit the block content, save the changes,
the rendered block will be updated.

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

38. ChartJS Page
• create a CANVAS element in the page

39. ChartJS Page
• set the input data

40. ChartJS Page
• convert the CANVAS element to a chart object
against the input data

41. ChartJS Page
• convert the CANVAS element to a chart object
against some input data.

42. ChartJS Page
• the rendered chart and the hovered value.

43. ChartJS Page
• we could add hover effects: highlight and label

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

48. EntityFieldQuery API
• _get_articles() function callback

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

57. Chart Block
• the chart will now be rendered in the block J

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

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()

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().

67. Target Menu and Admin Page

68. Chart Settings Admin Page

69. Hook_Menu: Paths

70. Hook_Menu: Labels and Form

71. _Chart_Admin_Settings Form

72. Adjust Hook_Block_View

73. Adjust Drupal Behaviors

74. Adjust Drupal Behaviors

75. Dynamic Chart J

76. Expose other Chart Options

77. Adjust _Chart_Admin_Settings

78. Configure Module’s Info

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..

80. https://github.com/ranelpadon/summercamp

81. Recommendations
• Drupal Development Tools
• Essential and Effective Drupal Tools
• http://befused.com/drupal/essential-tools

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.

84. There is beauty in Drupal.