Promet Knowledge Sharing

The good folks at Lullabot have been busy adding video courses to their site. We like their CCK video course enough to share with everyone.

Please share your thoughts on the video - and please fill out this Form

https://spreadsheets.google.com/viewform?formkey=clNmNnpJZktMRnNJa2J6YUVZLVhjeXc6MA..

If you have not received a copy of the video, contact me please.

I was studying how to create a Magento extension and I found a great solution in this blog but I got stucked when I wanted to use my own html layout and templates. The documentation lacks but I found great help in the forum. I’ll summarize here what I did so far.

1. Create your directory structure

app/
  etc/
    modules/
      - GroupName_All.xml 
  code/
    local/
      GroupName/ 
        ExtensionName/ (Or whatever your module name might be)
          Block/
          controllers/
            - IndexController.php
          etc/
            - config.xml
  design/
    frontend/
      default/
        yourtemplate/
          layout/
            extensionname.xml
          template/
            extensionname/
              form/
                index.phtml

2. Create your config.xml at app/local/GroupName/ExtensionName/etc/config.xml

 XML | 
 copy code |
?
 
01
02
<config>
03
    <modules>
04
        <groupname_extensionname>
05
            <version>0.0.1</version>
06
        </groupname_extensionname>
07
    </modules>
08
 
09
    <frontend>
10
        <routers>
11
            <extensionname>
12
                <use>standard</use>
13
                <args>
14
                    <module>GroupName_ExtensionName</module>
15
                    <frontname>extensionname</frontname>
16
                </args>
17
            </extensionname>
18
        </routers>
19
    </frontend>
20
</config>

And another one at app/etc/modules/GroupName_All.xml . This one enables our extension.

 XML | 
 copy code |
?
 
01
02
<?xml version="1.0"?>
03
<config>
04
    <modules>
05
        <GroupName_ExtensionName>
06
            <active>true</active>
07
            <codePool>local</codePool>
08
        </GroupName_ExtensionName>
09
    </modules>
10
</config>
11

3. Create your first controller at app/local/GroupName/ExtensionName/controllers/IndexController.php

 PHP | 
 copy code |
?
 
1
<?php
2
class GroupName_ExtensionName_IndexController extends Mage_Core_Controller_Front_Action {
3
    public function indexAction() {
4
        $this->loadLayout();
5
        $this->renderLayout();
6
    }
7
}
8

You can access this page in http:/localhost/magento//extensionname/ but the complete url is http://localhost/magento/extensionname/{index}/{index} . by default, magento looks for IndexController and indexAction when they are not specified. Refresh your cache and visit the above URL. You should see the default 3-column layout with nothing in the middle. Our next step is to add our “Hello World” content using only a 1-column layout.

4. Reopen our config.xml and add the following inside the <frontend> tag and right after the <routers> tag

 XML | 
 copy code |
?
 
1
        
2
<layout>
3
            <updates>
4
                <extensionname module="GroupName_ExtensionName">
5
                    <file>extensionname.xml</file>
6
                </extensionname>
7
            </updates>
8
          </layout> 
9

The above settings tells Magento to look for extensionname.xml in our layout. Create that file in app/design/frontend/default/yourtemplate/layout/extensionname.xml

 XML | 
 copy code |
?
 
01
<?xml version="1.0"?>
02
<layout version="0.1.0">
03
    <default>
04
    </default>
05
    <extensionname_index_index>
06
        <reference name="root">
07
            <action method="setTemplate"><template>page/2columns-left.phtml</template></action>
08
        </reference>
09
        <reference name="content">
10
            <block type="core/template" name="extensionname_form_index" output="toHtml" template="extensionname/form/index.phtml" ></block>
11
        </reference>
12
    </extensionname_index_index>
13
</layout> 

Let me explain what happend here.
The tag extensionname_index_index is generated using the format:
ExtensionName frontname that you specified in the config.xml + the controller name + the action name.

 XML | 
 copy code |
?
 
1
<action method="setTemplate"><template>page/2columns-left.phtml</template></action>

- set our template to 1column layout. You can change it to 2columns-left, 2columns-right or 3columns.

 XML | 
 copy code |
?
 
1
<block type="core/template" name="extensionname_form_index" output="toHtml" template="extensionname/form/index.phtml" ></block>

- the template attribute tells where to look for the html file in our template directory. The type attribute is used to tell Magento where to look for Helper file while the name is the name of the block.

Now we need to create our HTML file. Create a file in app/design/frontend/default/yourtemplate/template/extensionname/form/index.phtml (see the similarity in the template attribute above?) and add the following

 HTML | 
 copy code |
?
 
1
Hello World!

Refresh your page and you should see a 1-column layout with a Hello world! Try the other columns and add more contents.

Next time, I’ll post how to add forms and use helpers.

Topicko.com is a squidoo like application with more features that enable users to connect with each other.  This site was created using Drupal 6. Today, I’ll discuss one part of the application &mdash; how to build a site that allows users to add contents dynamically using squidoo modules.

Modules needed:

• CCK
• Flexifield
• other optional cck modules to your likings. In this example, we will use text, link and emfield

Our goal is to make a content type that enable writers and editors to dynamically add and reorder sections in their content. Sections in this page refers to the “modules” of squidoo, eg Amazon, Poll, RSS feed, Guest book, Text module and Youtube vids.

Steps:

1. First is to install CCK, flexifield and the optional modules (text, link, emfield). For emfield, you may just select the video media.

2. Flexifield only accepts valid content types and not individual cck modules. In order to utilize flexifield, create separate content types for the text, link and emfield which only contains their respective contents for simplicity. You can add more once you are familiar with the steps.

3. Create your primary content type, in this example we will use “squidoo” as our content type. Add a new flexifield. In the flexifield system settings, select the boxes for the Text, Link and Emfield content types. Set the Number of Values to unlimited.

4. Add a new squidoo content.

The following is a shot taken from the actual topicko’s add topic. It will show you how to add new fields and reorder them.

**We must all watch the video below on Drupal blocks and communicate at least one of the following:

• Those with Questions: You must post at least 1 question you may have about blocks.
  
  
  • Post your question.
  • Search for the answer to that question online or ask a co-worker who may be more knowledgeable.
  • Post the answers you get.
  • Post how getting the answer to your question helped you.
• Those with Experiences to Share: You must post at least 1 experience you have had building blocks.
  
  
  • Post the client/manager request.
  • Post how you decided on implementing the request into a block.
  • Post the staging link to the implementation.
  • Post a screenshot of the block and where it is on the site so there is no confusion.

The following video briefly explains what blocks are and how to create them:
http://www.youtube.com/watch?v=Hs_5IT1-K00
 
 
Happy sharing!

It is unfortunate that we are not all able to attend the various knowledge sharing conventions and meetings that help us understand the products we sell and how to use those products to the best of their ability. I am speaking of products such as Drupal, CakePHP and others we promote. Some of us have learned how these products work and are best implemented by trial and error. Others have been able to sit and listen to a step by step presentation. While both are valuable, each produces various methods of achieving our goals. Some are fantastic and some produce headache’s for us later on down the road.
 
This page will provide the launching pad for a series of learning and sharing programs that all of us will be a part of. If you have questions on what is being taught or discussed, you must find the answers online or by reaching out to a co-worker. If your level of knowledge is well above the lesson or presentation, please help with answering others questions. 

Finally, we believe that everyone on our team has a valuable lesson that may be shared with the rest.  Please submit your ideas or cool info you’d like to share with the rest of the team to Chris chris@promethost.com or Matt matt@promethost.com .  Some of the best suggestions will be rewarded!  Your tip should also include some basic questions that would stimulate further thoughts on the subject or just test the understanding of the lesson.

There seems to be lack of documentation on how to properly install img_assist. It took me a while before I figured out how to make the img_assist inline images appear in node content. So here it is:

img_assist will only display images if the Input Format of the current node is Full HTML. You can select the default Input format to HTML by setting it in the Input Format Configuration page (go to Admin > Site Configuraiton > Input Formats). Selecting the Full HTML option is not enough though. We need to configure this so it can recognize the img_assist tag. In the Input Format configuration page again, click the configure link of the Full HTML option. Under the Filters group, make sure to check the Inline images checkbox. As per the description, it will add images to your posts with Image assist.

And that’s it. The images should appear.

Usually we use the following snippet of code to assign a value in a variable given a condition:

<?php
if (cond) {
v = value1
} else {
v = value2
}
?>

This code can be expressed using the ternary operator.

<?php
v = cond ? value1 : value2;
?>

Of course we can use the ternary operator with nested conditions.

<?php
v = cond ? (cond1 ? value11 : value12) : (cond2?:value21:value22);
?>

But that isn’t really an advisable option

I’ve been working on a project using Drupal as our “framework”. One of our requirements is to allow our authors to moderate comments. What I mean by comment moderation is

1. allow the author to enable or disable commenting on their post; and
2. dictate if they want the comments to be approved or denied first before getting published in the public

Right now, only administrators are allowed to dictate if a node will accept comments or not. And it seems that Drupal core team does not have any plans on adding that, yet. There is however a module available that let users delete/edit/approve comments and overrides the permissions by the core. But, this still does satisfy my first requirement. Luckily I was toying with the Rules and CCK module and with them I was able to accomplish the first requirement without creating a new module or hacking another module — just pure administrative manipulation.

In order to get us rolling, we need 3 modules: Rules, CCK and PHP filter. PHP filter is already included in Drupal 6 (or D6 for short) so you have to download the first 2 modules. There are 3 major steps to fullfill this:

1. Add a CCK field
2. Create a new rule
3. Test

Lastly, this one is intended for D6 only. I haven’t tested in D5 and will never be.

Add a CCK field

This step will just mimic how an admin can enable/disable comments. Follow these steps.

1. Go to Administer > Content management > Content types (this is located in the navigation block. each underlined text means a link in your drupal site)
   
2. Click “manage fields” of the node type you wish. For this tutorial, we will use Page
3. Add a new field with the following attributes (you can change this later if you wish)
   Label: Comment moderation
   fieldname: comment
   Type of data to store: Text
   Form element to edit the data: Check boxes/radio buttons
4. On the next page, copy and paste the following text in the Allowed values
   0|Disable
   1|Read
   2|Read/Write
5. Optionally you can change other attributes and when your done click save button.

This will add a new field in your pages. Try to create or edit a page to see the added field in your edit form.

Create a new rule

This one will be a bit long but if you are already used to rules, then it is a piece of cake!

1. Go to Administer > Rules > Triggered rules
2. Add a new rule (check the tab)
3. Use the following information
   Label: Comment moderation
   Event: Content is going to be saved
   Click save changes button
4. You have created a new rule! But we are not done yet. Let’s add some conditions (click the add a condition link at the Rule elements group).
5. In the next page, select Field has changed option and submit.
6. Then we can start adding more information regarding this condition. The only important fields you should fill up is the Field. Make sure to select our newly created CCK field - field_comment. Do not change anything except for the label if you want and then click the Save button.
7. You are then redirected to the Comment moderation edit page. Let’s add a new action (click the add an action link at the Rule elements group).
8. In the next page, select Execute custom PHP code (that is why we need the PHP filter so we can write some code) and click Forward button.
9. Next, edit the label to your liking and in the PHP Code textarea, copy and paste the following:
   // change the comment moderation status
   $node->comment = $node->field_comments[0]['value'];
   return array(”node” => $node);
10. Click save and we are done.

What will happen here is that when the node is created or updated (Step #3), it will check for a condition which we did in Step #5. If the condition is met, and that the field_comment’s value was changed, it will process the stated actions we added in Step #9. The code means it wants to replace the default comment status to the selected values of field_comment.

Testing

We are now ready to test it. Create a new page or edit the page you created before. Try to disable and enable the values and save. It should be working. If not, let me know the problem in the comment box.

You might also notice that in your page view, you will see the Comment option has been displayed. We can hide this in the admin. Let’s go back again to our Content type administration area (Administer > Content management > Content types). Click manage fields and then click Display fields tab. Just change the Teaser and Full node column of your field_comment to <Hidden>. It will hide the field to the page view. Check again.

What’s next?

There is no next! If you ever uninstalled Comment module, just deactivate this rule to save some processing time but it’s not required.

Wondering how your website look in different browsers? Check out the following for a view on how your website might look on a certain browser.

• Browsershots.org 
• IE NetRenderer
• Browsercam
• Browsrcamp.com

I ran once an error in InnerHTML when trying to display AJAX imported form fields and post the values entered for these fields. The values were being passed when the form is submitted in IE, but not in Firefox. Firefox only returns a javascript error stating that the field has no properties and thus returning an undefined value.

After much trials-and-error reconstructing the AJAX imported field and searching the net for a possible solution, I came upon this site (http://www.robertnyman.com/2006/04/20/we-all-love-innerhtml/) where the fix came from one of the readers’ comments.

You need to make the form, where the AJAX imported form fields are located, nested correctly. As for my case, it should follow the correct nesting layout between forms and table. So I changed this previous layout:

<table>
 <form> 
   …. Other elements here ..
 </form>
</table>

To this:

<form>
  <table>
   …. Other elements here ..
  </table>
</form>

And that did the trick, I was then able to submit values entered from the AJAX generated fields passed through innerHTML in Firefox.