Integrating Zoop and Drupal

Here Zoop community member Jeremy will be walking us through how he integrated Zoop and Drupal. This tutorial will be created Wiki style in hopes that others will aid / update.

Objective
The purpose of this tutorial is to show you how to add a Zoop (1.3) application or page to Drupal 5 as a content page. These techniques will probably work in Drupal 4 but the function names are different. Additionally, I will explain how to integrate session management from Drupal into Zoop. The latter opens up the entire scope of user/session/subscription management modules to your Zoop app. ..Yes, you read that correctly. **I have not tested any of this with Zoop 1.5**

Adding your Zoop application or page to Drupal

1. Create a new page in Druapl. Set the input mode on the page to be php
2. Add you content like so. You must use the functions in the sample to add css and js to you page. The function calls will be executed before the page loads and the files you load will appear in the head tag of the Drupal page. So, don't expect execution of and scripts in the body. If you want execution when the page loads you need to add an onload in one of the js files you load. That's what I did ...keep reading. Alternatively, there's supposed to be a "correct" way to create an onload in Drupal. I don't know what that is.

   Nothing is written in stone reagarding what to include and what to exclude. I have no HTML in my pages other then a single div with an id attribute since my Zoop app is 100% Ajax.

   <div id="myContentDiv"></div>

3. This example sets a body onload event that will trigger an Ajax call using Prototypes Upater method. The returned content fills the div. From there the application is visible to the user. I happen to have a smarty template that loads a set of four divs into along with other application content. I use those four divs to display additional messages, content, status information and whatever else I want.

   The myapp.js file contains this along with the entire application.

   embed = MyApp;
   window.onload=function(){
     if(embed){
        loadEmbed('Embed' + embed,'myContentDiv','myZone');
     }else{
        alert('Error: No content specified for loading'); 
     }
   }
   loadEmbed = function(what,where,zone){
     var url='/skeleton/index.php/' + zone + '/' + what;
     new Ajax.Updater(where,url,{method: 'get', onComplete: function(transport){initApp();}
                                              });
   }

   This js loads the content returned from /skeleton/index.php/myZone/EmbedMyApp/ in to myContentDiv and onComplete it runs initApp(). initApp() just sets some defaults on the page.

4. If you are not using AJAX just load the Zoop components you need in to the page. Remember that submitting the page will submit to the Drupal URL, not the Zoop URL. Thus, you cannot expect zoop behavior. However, you could probably create other pages in Drupal to handle you posts. After all Drupal accepts PHP content. Really, AJAX is so easy with Zoop and Prototype. Why would you not use it.
5. save you page and test it.

Integrating Zoop and Drupal session and user management

Before I start, know that I've been using this scenario on a large application for going on 9 months with absolutely no ill effects.

...Your mileage may vary and I may have left something out unintentionally (Though I'm pretty sure I didn't).

Are you ready?
Go get something to eat and a pot of coffee, this could take days! ;-)

1. Locate Your Drupal includes/bootstrap.inc file. (yes, Drupal needs to be installed already).
   Take note of the path to that file.
2. Open the file session/session_component.php in your Zoop source directory. (yes, Zoop needs to be installed already)
3. change the name of the init function to something else. I renamed mine '_init'. You might prefer 'original_init' or 'mydoghasfleas'.
4. Paste in this shiny new init function. Make sure you replace 'your_drupal_bootstrap_path' with the path you took note of above. Make sure it's the full path to the bootstrap.inc file.

function init()
{
    require_once 'your_drupal_bootstrap_path';
    drupal_bootstrap(DRUPAL_SESSION_DATA_ONLY);
}

Testing and Using your Drupal - Zoop Integration

Assuming everything was done correctly with the bootstrap integration above you're ready to use drupal and zoop together.

Here's a way to have your Zoop app depend on Drupal for permissions,user management, sessions, etc.

1. Open up the zone file for your zoop app.
2. In your initZone file use something like this condition to control whatever you want to control.

 $user = $GLOBALS['user'];  //This is one of the globals that Drupal creates.
 //print_r($user);  // Do this to see what you have access to.
 if($user->uid > '1'){
     if( $user->roles[4] == 'Premium Subscriber' || $user->roles[6] == 'Some Role'){
          define_paying_subscriber_globals(); // A function that does stuff for these people.
     }else{
          // Unauthenticated user - must login via drupal
          print "The Section is for paying subscribers only.<br/>";
          exit;
     }
 }else if($user->uid == '0'){
     print "You are not logged in.<br/>";
     exit;
 }

Now you can build your site using all the user and group management possibilities of Drupal and use zoop to build the core application. In my case, I use premium content and roles in Drupal to control what parts of the application my users can access. There is no need to limit yourself to the initZone function. You can access the drupal globals from anywhere you want.

gotchas with Drupal:

1. Drupal templates can change the layout of your zoop generated content. This is often a very good thing. However, it can be a real pain when using various selector widgets that have their own styles. This is generally because some templates are designed to enforce styles globally. So, you'll find css constructs for things like div,th,td,table ...etc that will affect any such elements on the page. If you care, you should modify the template css or your code accordingly.

Go create something,
Jeremy Brooks