Week 9 Instructions: Drupal Modules

This week we'll learn how to download and install drupal modules - in particular the FCKEditor and IMCE modules.  You'll need to install 7-zip or a similar program to decompress the .tar.gz files.

Then we'll start building a site for our final project.  This will be a skeleton site for a real or fictional organization such as a school, business, non-profit, etc.  We'll learn how to create a navigation bar ("menu" in drupal terms), and add "blocks" of content to our site.

Videos

• Video 1: Install Drupal Modules
• Video 2: Configuring FCKEditor and IMCE
• Video 3: Enabling Modules, Primary Navigation Bar, Contact Form
• Video 4: Drupal Blocks

Assignment

• No more weekly assignments.  This week you'll start building your site for your final project.  More details will be posted soon.

Installing Drupal Modules

[See Video 1: Install Drupal Modules]

Download and install the FCKEditor and IMCE modules.  Scroll down to the "Releases" section and click the 'download' link for the Drupal 6 version of each module.  Each module is contained in a "tar.gz" compressed file that you download.

You'll need to install 7-zip or a similar program to decompress the .tar.gz files.  Mac users please let me know what program you think is best - I used to use stuffit expander for this purpose.

Right click on the tar.gz file, then go to 7-zip -> extract here.  That will create a sub-folder called "fckeditor" (and "imce" for the other module).  See this video on how to install fckeditor in drupal if you need more help, too.

You also need to download the FCKEditor library separately, too.  Download the zip file, move it inside your fckeditor folder, then right click -> 7-zip -> extract here.

Now find where to put your 2 module folders in order that your drupal site can use them.

Go to your home folder (start->your name), then Sites -> acquia-drupal-site -> acquia-drupal -> sites -> all.  Right click the background of the 'all' folder and select 'new folder'.  Name the folder "modules".  Also create a new folder called "themes" if you wish.  These 2 folders hold any custom modules and themes that you want to download and install.

Now you can drag your "fckeditor" and "imce" folders inside that new "modules" folder.

Start up the Acquia Drupal control panel, click the 'go to my site' button, login to your site, then go to 'Site Building' -> Modules (under the black administration menu at the top of the screen).  Scroll down the list of modules and you'll see FCKEditor and IMCE.  Check the checkbox next to both of those, and then scroll down to the bottom and click 'Save Configuration' to enable both modules.

Configuring FCKEditor and IMCE

[See Video 2: Configuring FCKEditor and IMCE]

Now in the black administration menu at the top of the page, go to 'Site Configuration' and 'FCKEditor Settings' to configure FCKEditor if you wish.  You can click the 'permissions' link to say which roles have permission to use FCKEditor and so forth.

We need to do 2 more things: tell FCKEditor to use IMCE for image/file handling, and also add more allowed HTML tags to our input filters.

First we'll tell FCKEditor to use IMCE for file handling:

FCKeditor: Admin->Settings->Fckeditor profile->File browser settings->IMCE integration

Then add more HTML tags are allowed to be entered when creating content/nodes:

Enter these tags into Admin->Input Formats->Configure Filtered HTML->Configure->Allowed HTML Tags:

<a> <p> <span> <div> <h1> <h2> <h3> <h4> <h5> <h6> <img> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong> <font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <strike> <caption>.<embed>

Now when you 'Create Content' you should see the FCKEditor toolbar.  Click the yellow picture frame icon and then 'browse server' to upload and insert an image.

Building Your Drupal Site

[See Video 3: Enabling Modules, Primary Links Navigation Bar, Contact Form]

We first changed the site name (admin->site configuration->site information) and uploaded a new logo image (admin->site building->themes->configure acquia-marina).  You can create a logo using a free program like Gimp or Inkscape, or right click on an existing image on the web and select 'save image as'.

Then we created an "About Us" page (content management->create content->Page).  Under the title we created a 'primary links' menu item titled "About Us".  When you save the page you'll now see a tab called "About Us" appear in the header of your site.  This is the start of a navigation bar for your site.

We went to Site Building -> Menus to add a "Home" tab to the primary links navigation bar.  Click the link to primary links, then 'add item'.  For the path, we entered <front> and the name of the menu item was "Home".  For the weight, we put -50 so that this menu item appears first in the primary links navigation bar.  Hit save and your navigation bar should now have 2 items.

We went to the list of modules (admin->site building->modules) and checked every single module after the apache solr ones.  This enables every module, it takes a good 2-5 minutes while drupal installs them all, so be patient.

We configured pathauto so that our content/nodes have nicer URLs than "node/9" and so forth.  Go to site building->URL aliases->Automated alias settings, and under the 'node path settings' we changed the default path pattern to just [title-raw].  Then we checked "Bulk generate aliases for nodes that are not aliased" to create nicer urls for the content we already entered.  Hit the save button at the bottom and go back to your "About Us" page.  It should have a nicer URL than "node/9" or whatever now.

We also configured the Contact module to create a contact form.  Go under Site Building->Contact Form and click "Add Category".  You might call the category "General" for general questions, and under the Recipients text box click the 'switch to plain text editor' to turn off FCKEditor and then enter an email address for who will receive messages from that form.  Click the Save button at the bottom and now you'll have a contact form at http://localhost:8082/acquia-drupal/contact

We added a link to that contact form in our primary links navigation bar (see above) with a weight of 50 so that it appears last.

Drupal Blocks

[See Video 4: Drupal Blocks]

The final element for structuring the content on your Drupal site is blocks.

Any page on your site is divided into regions, such as the header, footer, and sidebars.  The acquia-marina theme we are using actually has about 12 regions.  Inside each region you can add blocks.  These are little boxes of content.  You can not only specify in what region a block should appear, but also on what pages (paths) the block should appear such as only on the <front> page, or only on blog pages (blog/*), and also for whom the block is visible (such as only 'authenticated users' or 'anonymous users').

Go to Site Building->Blocks to see the regions and blocks that are available.  If you enabled all the modules earlier, you should see a large list at the bottom.  Click on the popup list next to each block to select in what region it should appear (or <none> to disable it).

Click the "Add Block" link at the top of the list to add a new custom block.  In the video we add a block with contact information for example, and display it in a sidebar on the front page.

We also added the 'random image' block to the 'postscript first' region and the 'recent blog posts' block to the 'postscript last' region.

To actually show a random image or recent blog post you need to create them. 

We created an image gallery (site building->image galleries) and then uploaded an image to it (create content->image).

We created a blog post by going to create content->blog entry.

Next Week

Next week we'll explore how to customize the CSS and other aspects of a drupal theme.

And then in the final week we'll explore the Views and CCK (content construction kit) modules for creating lists of items and also web applications.

Final Project More Info

I'll post more details about your final project soon, but you'll want to create a skeleton website using Drupal for a real or fictional organization such as a school or business or non-profit.  It should display all the things we are learning about, such as custom modules, navigation bar, and so forth.

I can't see your site since it is running only on your local computer, so instead I need you to create a guided tour of your site and send it to me.  You can do this using the free Screencast-o-matic or Jing tools, and then email the video file to me using USU's big file transfer service: http://bft.usu.edu/

See Also

See the Getting Started with Drupal videos from learnbythedrop.com.