Archive for the ‘Drupal’ Category

Drupal: How to hide the login block

Saturday, February 14th, 2009

How to hide the login block from all pages:

  1. Navigation to: Administer –> Site building –> Blocks
  2. Set the region of the “User Login” block to “none”
  3. Click Save.
  4. Open another webbrowser and append “?q=user” to the site url to login.
  5. Enter the user and and password in the rendered User Login block.

Drupal: ActiveField Module

Friday, August 22nd, 2008

<<RAW>>

Summary

This module takes the values entered for pre-defined “source” fields and dynamically sets the values of predefined “target” fields via jQuery and AJAX.  The “source” and “target” fields can be of any field type; i.e., they are not limited to drop down menu fields.  There are two primary use cases for this module: Creating content and Editing content. For Example, there is a Drupal site that allows it users to create “Location” and “Field Trip” content:

Fig. 1 Location content

Location Content

Fig. 2 Field Trip content

Field Trip Content

Creating Content Use Case

  1. Create a new location. (Fig. 1)
  2. Create a new Field Trip. (Fig. 2)
  3. Enter Title
  4. Select a date
  5. Select a location from the drop down menu.
  6. The Capital, Sunrise, and Sunset are populated with values based on the date and location selected.
  7. Submit.
  8. Extensions:
    1. The Editing Content Use Case (steps 2 - 7) is also applicable while creating content.
    2. If a value is not set for one of the source fields, then the target fields are not set.

Editing Content Use Case

  1. Edit an existing Field Trip
  2. Select a new date
  3. The Capital, Sunrise, and Sunset are populated with new values based on the new date.
  4. Select a new location
  5. The Capital, Sunrise, and Sunset are populated with new values based on the new location selected.
  6. Select a new date and a new location.
  7. The Capital, Sunrise, and Sunset are populated with new values based on the new date and new location selected.
  8. Save.

Technical Description

Technically speaking, these two use cases above represent a bidirectional communication between jQuery (client side) and Drupal (server side) via AJAX: $.get(url, params, callback); More specifically:

Fig. 3 Active Field Sequence Diagram

Sequence Diagram

(1) The change event of the source field triggers an (2) AJAX call to a URL (i.e. “add/field-trip”), (3) which is mapped to a Drupal function via ActiveField_menu() hook that (4) calls the ActiveField_getTargets() function, which executes a SQL query to the Drupal database and (5) returns a JSON via drupal_to_js() function; (6) this JSON is then passed into anonymous function (i.e. the “call back”), which (7) sets the value of the target fields.

The params parameter of the AJAX $.get(url, params, callback) function is not specified in Fig. 3 above because its value depends on respective use case scenario being solved.  For example, if the target fields are not dependent on the values of the selected source fields, then value is “null”; in this scenario, the target field will be populated with default values when the change events of the source fields are fired.  In scenarios where the values of the target fields are in fact dependent on the values selected for the source fields, then params would look something like:

{sourcefield1:$(’#srcfld1-id’).val();,srfld2:$(’#sourcefield2-id’).val();}

In the Location/Field Trip scenario, params would look something like:

{date:$(’#edit-field-date-value’).val();, location:$(’#edit-field-location-key’).val();}

The exact selector ids may vary from system to system.

A Drupal module can define its own theme and forms or interoperate  with an existing theme and forms.  The ActiveField module is an example of the latter.  In order to realize this, the .js file containing the JavaScript must be called from the ActiveField module itself and not from the theme layer (c.f.).  One way to realize this is via hook_alter_form().  This hook utilizes a form id to alter a form.  The form id of the Field Trip form is “field_trip_node_form”:

<input id=”edit-field-trip-node-form” type=”hidden” value=”field_trip_node_form” name=”form_id“/>

FireBug, can be used to obtain the field ids on the  page:

  1. Go to the webpage.
  2. Open up FireBug.
  3. Click the HTML tab.
  4. Click the Ispect menu item.
  5. Move the mouse cursor over the fields (e.g. Capital, Sunrise, Sunset) and the respective HTML with the field id will be displayed to the console.

Code

The ActiveField module has the following files:

  1. ActiveField.info
  2. ActiveField.js
  3. ActiveField.module

A .install file was not created because no database tables need to be created or deleted when the module is activated or disabled; or at least, not at this time.  Currently the “source” and “target” fields are pre-defined via code (i.e. hard-coded) and a separate instance of the module (i.e. copy/paste/modify) may be required for each set of “source” and “target” fields.  In ActiveField 2.0, the follow features will be implemented:

  1. Pre-define “target” and “source” fields via Admin interface
  2. Create multiple sets of “target” and “source” fields

Software

  1. Drupal 5.3
  2. CCK Module 5.x-1.6-1
  3. Devel Module 5.x-0.4
  4. jQuery Interface Library 5.x-1.0
  5. jQuery Update 5.x-1.0
  6. JSCalendar 5.x-1.0
  7. FireFox
  8. FireBug

References

Drupal API

  1. drupal_ad_js()
  2. hook_alter_form()
  3. hook_menu()
  4. check_plain()

jQuery

  1. jQuery
  2. Learning jQuery
  3. Visual jQuery

Books

  1. Building Online Communities with Drupal, phpBB, and WordPress
  2. Drupal: Creating Blogs, Forums, Portals and Community Websites
  3. Drupal 5 Themes
  4. Pro Drupal Development
  5. Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques
  6. jQuery in Action

Videos

  1. Lesson 12: jQuery Resurrected
  2. Lesson 07: An intro to jQuery magic
  3. Show login block using jQuery modal window
  4. Tutorials:Quick and Dirty Ajax (Screencast)
  5. Essentials of DOM and JavaScript
  6. Drupal School: Tasty JQuery Modules
  7. jQuery - Google Tech Talks
  8. AHAH! - Ajax + FormAPI = More Responsive UI
  9. jQuery AJAX forms

Blogs

  1. Leaning jQuery
  2. 15 Days of jQuery

Articles

  1. Javascript, jQuery and AJAX
  2. jQuery Hints and Snippets
  3. Drupal and Ajax working together
  4. Using jQuery
  5. How to pass a value in a form (jQuery) to Drupal (PHP)
  6. Using Ajax in Drupal 6
  7. Storing what jQuery returns in a PHP variable
  8. Tutorials: How to Get Anything You Want
  9. Simplify Ajax development with jQuery
  10. Modifying Forms in Drupal 5 and 6
  11. Adding JavaScript to your theme or module
  12. An Introduction to Unit Testing in Drupal

“Debugging”

  1. Drupal Module Development Support
  2. Drupal Dojo Discussion
  3. Debugging Drupal via XDebug & Eclipse PDT
  4. Quick-and-Dirty Debugging
  5. Drupal Podcast No. 31: Drupal Development Tools
  6. Methodology
    1. Client Side
      1. FireBug - use the ‘console’ tab to determine whether the AJAX callback is being invoked and to examine what is being returned
      2. FireBug - Click the “Profile” button.  Execute the respective use case. Click the “Profile” button again.  Review the resulting JavaScript function execution profile.
      3. FireFox - Delete the cache: Tools menu –> Clear Private Data…
    2. Server Side
      1. There are several options here.
      2. Quick Option: use  drupal_set_message(”FunctionName: entered”);

Drupal: Populating CCK Fields via SQL

Tuesday, July 29th, 2008

<<RAW>>

Querying a Drupal database requires knowledge of SQL and Drupal’s Database Abstraction Layer.  Once you have the result from the query, how you manipulate this returned object depends on how you want to utilize that data.  For example:

  1. Adding a default value to a text field in a CCK content type
  2. Adding values to a select field (a.k.a “drop down menu”) in a CCK content type

Steps

  1. Define the SQL Query and store it in a variable
  2. Call db_query with the SQL Query variable
  3. Manipulating the Returned Object
    1. If you only need one field, then call db_result()
    2. Else, call db_fetch_object() or db_fetch_array()

Articles

  1. Database Abstraction Layer
  2. Making a database enquiry using db_query

Drupal API

  1. db_query
  2. db_fetch_object
  3. node_get_types
  4. db_result()

jQuery|Drupal QRC

Sunday, May 11th, 2008

Drupal: API QRC

Friday, May 9th, 2008


  1. db_query
  2. db_fetch_object
  3. node_get_types
  4. db_result
  5. drupal_add_js
  6. hook_nodeapi
  7. hook_form_alter

NOTE: download and activate the Devel module

Drupal: Security

Friday, April 25th, 2008

Modules

  1. * Login Security
  2. Paranoia
  3. Secure Site
  4. * Password Strength
  5. Persistent Login
  6. PHPIDS
  7. Registration Code
  8. Remove Non-Viewable Menu Items
  9. * Restricted Search
  10. Salt
  11. Secure Login
  12. * Secure Pages
  13. * Secure Password Hasses (phpass)
  14. * Single Login
  15. Taxonomy Access Control
  16. Taxonomy Access Control Lite
  17. User Permissions

Articles

  1. Data Encryption
  2. Secure Pages Blog Article
  3. Screen cast on Taxonomy Access Control Lite

Drupal: Creating and Editing Several Nodes

Friday, April 18th, 2008

The Pageroute module “can be used to provide a user friendly wizard for creating and editing several nodes.”

Resources:

  1. Pageroute module
  2. Node Family module
  3. Subform Element module
  4. Workflow-ng module
  5. Workflow-ng blog
  6. Workflow-ng whitepaper

Drupal: ActiveSelect

Monday, April 14th, 2008

The ActiveSelect module is a “UI-less” module; that is, it is an API module. I am investigating this module and will update this page accordingly.

Description
The activeselect module defines the activeselect form element. A activeselect element is the same as a regular select element, except that when the user selects a new option (or set of options), different select element (the target element) gets its list updated. This is done using AJAX, and it is designed to degrade gracefully if the equired JavaScript support is not present. The target element can be either a regular select box, or another activeselect box which in turn can trigger another target box, which can trigger yet another, resulting in a hierarchical cascade of activeselect elements).

Notes
- Activeselect now supports multiple targets, each of which can be updated simultaneously with a different set of options.
- This module is of no use by itself. You only need to install this module if another module (e.g. the category module) instructs you to do so.
- The JavaScript library for this module is based heavily on the Drupal core AutoComplete JavaScript library (autocomplete.js). Much credit and thanks goes to the authors of AutoComplete.

Author: Jeremy Epstein

 

This first Drupal module to exploit ActiveSelect is the Category module: Using activeselect with category

The category module allows you to structure your site into a tree-like hierarchy of pages, and to classify your dynamic content, all within one seamless interface. It is built upon the foundations of the core book and taxonomy modules, and it provides all of the functionality of these two modules, and much more, to help you in customizing the navigational experience of your Drupal site.

Resources

Drupal: ImageField Gallery Module

Saturday, April 5th, 2008

There are several modules for working with Images in Drupal. In particular, the Image Field Gallery Field:


The Image Field Gallery Field is dependent on these modules:

After enabling the respective modules, the following menus are created:

Administer –> Site Configuration –>

  • Image
  • Image Cache
  • Imagefield Gallery Administration
  • Imagefield Gallery Content Types

How to Setup

  1. Add a field to a Content Type of type: Image
  2. Go to Administer –> Site Configuration –> Imagefield Gallery Content Types
  3. Select the content type with the newly added Image field
  4. In the Data settings, be sure to enable the “Multiple values” option
  5. Select a Gallery Type (e.g. “Lightbox2 Gallery”)
  6. Select a thumbnail and preview cache setting (e.g. “original”)
  7. Go to Administer –> Site Configuration –> Imagefield Gallery Administration
  8. Configure the Gallery:
    1. Thumbnail Attributes
    2. Margin Attributes
    3. Border Attributes
  9. Go to Administer –> Site Configuration –> Image Cache
    1. [I have not figure this one out yet.]
  10. Go to Administer –> Site Configuration –> Image
  11. Configure the respective fields:
    1. Default image path
    2. Maximum upload size
    3. Image sizes
  12. Go to Administer -> User Management -> Access Control
  13. Enable the respective permissions for the image module:
    1. Create Images
    2. Edit Images
    3. Edit own Images
    4. View Original Images

Drupal: WYSIWYG HTML Editors

Friday, April 4th, 2008

Based on my research, there are two WYSIWYG HTML editors for Drupal:

  1. TinyMCE
  2. FCKEditor

I have installed on and used the TinyMCE editor in Wordpress. But, I have not been able to get it working on Drupal 5.x. Hence, I started looking for an alternative and discovered FCKEditor, which has some cool features. Currently, the best way to work with images in FCKEditor is to exploit the IMCE module, which requires no configuration.

In summary, three different pieces of software need to be downloaded:

  1. FCKEditor Component
  2. FCKEditor Module
  3. IMCE Module

Resources

  1. FCKEditer Install Guide
  2. FCKEditor User Guide