Nov 17, 2012

, Drupal hooks : Basic Ajax request/response with Drupal 7 menu hook





Hello world!
This tutorial assumes that you are at least 50% familiar with drupal hook_menu()  and Jquery Ajax and I apologize in advance because I’ll be sticked with the topic and never come out of it. please post a comment below if you need more clarifications in any other areas not-related to the topic. Thank you.
 
My goal: Very simple!

  • I am having a HTML form with a textfield in a page.
  • Once the text field is filled and when the cursor moves/changes from it I need to pass the textfield value to my Drupal module with the use of AJAX and receive the response from it.
Step 1
  • In my module file I right the hook_menu()

Code:

/*

* Implementation of hook_menu()
*/
function mymodule_menu() {
$items['any/path/% ] = array(
  'page arguments' => array(2),
  'page callback' => 'myAnyFunction',
  'access arguments' => array('access content'),
  'type' => MENU_CALLBACK
 );
 return $items;
}


$items['any/path/% ] :  This is where you define a path, the “%” is the parameter meter that will be passed from the AJax request.

'page arguments' => array(2) :  You get the second argument of the path which is the ‘%’ (so “any” is 0 , “path” is 1, ‘%’ is 2).

'page callback' => 'myAnyFunction', : This is the function that will be triggered once the defined path is called, here is where we are going to right the response for Ajax.

'access arguments' => array('access content'):  This should be specified definitely when creating a module,if not you might get permission issues.

'type' => MENU_CALLBACK : Specify the menu type [checkout the ccomplte refrence here for menu types ]

return $items; You return the menu.

Step 2
  • And right the below Jquery with ajax request
Code:
jQuery(document).ready(function() {
$('#mytextfield').change(function() {

//Get the value of the textfield on change
var textfieldvalue= $('#mytextfield').val();

//pass the value to the url you created in the hook_menu();
path = '/customer/autofill/'+textfieldvalue;
$.ajax({
            url: path,
            method: 'POST', //you can make use of the GET method tooo
            success: function(data) { // recieve the response from the defined function
                        alert(data);
            }
            });
              false;
            });

Step 3
  • Now the response to the ajax to be written in the module file again
  • Can you remember this 'page callback' => 'myAnyFunction'  we wrote in step 1
  • So “myanyfunction” will be the function to respond the Ajax request

Code: 


//The $argument1 is the value passed by ajax and retrieved by hook_
menu() and again passed to the function
function myAnyFunction($argument1){

//This will be printed as the response

echo ‘Successfully received ’. $argument1;
}

Hmmmm..! are we done?
BOOOOM! yes we did it.

Note :  This is a very basic thing that you can do with AJAX and Drupal, there are more complicated things that you can deal with. I’ll be coming up with a very nice tutorial to do auto-fill fields using Ajax and Drupal 7 Database layer.
Please place your valuable comments below. Thnak you.

Stay tuned by following me in twitter








Aug 4, 2012

Drupal 7 + WYSIWYG + CkEditor | Install and configure




Before we start how to Install and configure Wysiwyg and CKEditor into your Drupal site , lets have a quick look about it?

What does WYSIWYG stands for?
It stands for What You See Is What You Get

Why do we use it?
WYSIWYG editors are used to generate the HTML code necessary for viewing web page content.

How useful they’re?
They are particularly useful for people with limited or no knowledge of HTML code in other words you do not need HTML tags to use.

As you create your content, the editor creates the code in background.

For example, if you want your text to appear in different colours, fonts in different sizes, all you need is to highlight the text and select the appropriate option from the tools available in the editor.

What is CKEditor?

CKEditor is a text editor to be used inside web pages. It's a WYSIWYG editor, which means that the text being edited on it looks as similar as possible to the results users have when publishing it. It brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice. 
This is the ideal editor for developers, created to provide easy and powerful solutions to their users.

Installation and Configurations
  • Download wysiwyg module from http://drupal.org/project/wysiwyg
  • Extract to your (modules sites/all/modules) directory
  • Then navigate to admin/config/content/wysiwyg to download the editor Library you want to install in your site
  • So, here I am going to select CKEditor
    • and I downloaded it from http://ckeditor.com/download
    • once the .zip file is downloaded extract the file and place it in sites/all/libraries folder
  • Go back again to admin/config/content/wysiwyg, now you’ll see the window as shown below in image 1.0

Image 1.0
  • Here is the place that I am going to select which input format is going to use the CKEditor/Wysiwyg
  • I’ll select the Filtered HTML format and hit “Save” (when the input format is selected to be filtered html I’ll be able to see the CKEditor whenever I create a block, node etc...)
  • ^^^ Even after the above step we’ll not find the needed icons or plugins in the editor, it will look simply plain

Image 2.0

  • Now you need to enable all the plugins that you need to appear in the CKEditor as shown in the Image 4.0 Navigate to admin/config/content/wysiwyg/profile/filtered_html/edit and expand the option “Buttons and Plugins” and check all the plugins that you wanted to appear in the Editor.
 
Image 3.0

  • We’ve done it! didn’t we ? check it for yourself , go and create a content , make sure the input format is “Filtered HTML" ------
    Boooom!
Image 4.0

Aug 1, 2012

Drupal Quick Tip: Drupal 7 FAQs | Drupal Modules | Drupal Panels | Drupal Questions | Drupal Doubts


Common
  • What is Drupal?

  • What is module in Drupal?
Module is like an addon/plugin that you install and enable in drupal to enhance and
expand features in your site. The modules are developed by the drupal community

Drupal 7
  • How do I get the Admin menu as Drupal 6?
Install and enable the module Administration module and Disable the module “Toolbar”
which comes with the core modules in Drupal 7

  • How to enable the “PHP Code” filter when creating a content?
Go to Modules list (/admin/modules) and enable “PHP filter” module under core category

  • I cannot create a Panel Page in panels !
Enable the  “Page manager” module in the modules page

  • I want to create a content type which has my taxonomy terms as a field too !
When creating a feild in your content type make sure you select the field-type as

  • Can I create dummy contents in Drupal 7?
Yes, you can!
Install the Devel module and enable the Devel Genrate module too (which is a sub
module of it)

  • How to add conditional stylesheets in Drupal 7
Download and install the “conditional stylesheets” module from
http://drupal.org/project/conditional_styles and add the below code in your .info file as
need

  conditional-stylesheets[if IE 7][all][] = ie7.css



  • Where do I place my new custom panel layout?
It should be placed in layout folder inside your theme folder eg:
sites/all/themes/mytheme/layouts

Every week we update the article! stay tuned !

Feb 2, 2012

Drupal for Facebook/ Share the content creating in Drupal with Facebook




Objective:
The Admin/Company Facebook_page/ Wall should update when the site admin creates a content, again sharing should be optional where the admin can simply un-tick if he/she doesn’t want to share.

'When I was requested to meet the above objective I remembered Drupal had a module (Post it everywhere') to fulfill, unfortunately it didn't let me to do what I was supposed to do.

After spending some time I came across 'Drupal for Facebook' module which had a special feature to do what I want, but yet it failed to please me, because the configurations were too complicated and did not act as expected. after going through many articles and documentations I found how it works. 

Finally I wanted to share and merge everything together as one document. So, here it is ...!


Version
  • Drupal 6
  • PHP 5 / >
Modules required


Libraries required

Installation
  • Download the “Drupal for Facebook” module, extract, upload
    • eg: sites/all/modules/fb
  • Download the facebook/sdk, extract it, rename the folder to ‘facebook-php-sdk’, and place it in the libraries directory
    • eg: sites/all/libraries/facebook-php-sdk
  • Next go to the modules page ‘admin/build/modules’ and enable the following modules (sub modules comes under the “Drupal for facebook” module)
    • Facebook API, Facebook Apps, Facebook Stream, Facebook Connect


Confuguration
  • Next navigate to the ‘Facebook applications’ page ‘/admin/build/fb’ or
site building->facebook application.
  • and click ‘Add apps’
    • Now fill out the fields with the needed information
      • Label :  a short name for your app (in lowercase)
      • Check ‘Enabled’
      • Facebook App ID:   : Application public key generated by facebook
      • Secret: Application secret key
      • Check the following image 0.1


  • If you don’t have an App, follow the instructions given above the ‘Label’ in the same page ‘/admin/build/fb/fb_app_create/’ to creat one, and add the keys in relevant fields
Create the custom module
  • In this module, we prompt the user to publish to their Facebook stream after they perform an         action on Drupal (save a node). Because the stream publishing options are relatively complex, we use PHP code to control it. This example comes from fb_example.module, which is included in Drupal for Facebook. You'll find other examples of how to customize behavior there. In your own custom module, you'll want to replace every occurrence of "fb_example" with your module's name.
  • Copy & Paste the code from the below given link in your .module file and do not forget to replace every occurrence of "fb_example" with your module's name

 Facebook Connect
  • Next click on the tab ’Facebook connect’ admin/build/fb/fb_connect
    • and select your app from the ‘Primary Connect Application’ dropdown list\
    • then tick the options you want under ‘Theme overrides’ section


NOTE : Facebook connect is an essential component to accomplish our objective
  • When Facebook Connect module is enabled it creates a block in admin/build/block so, you will have to locate in in a region in-order to make it visible
    • eg: content, footer, header


We are now in our final lap
  • Make sure you have logged in as the admin in Drupal.
  • and you’ll be able to see the Facebook connect icon in the region you located like the below image.


  • Click on it and login with your facebook usernamel, password details.
  • Now Click ‘Content management’ and create a content and you’ll be able to see the check-box checked ‘Share on Facebook’.


  • And once you hit ‘save’ after filling the fields a facebook window will pop-up requesting you to write something and share it as the following image.   

  • Trust me you’ve done !!

Have a great time with the module !!!!