Drupal Demo: Creating a brochure/informational site

As promised earlier I will be using an example driven approach to documenting my Drupal experiences. If you would like to follow along with these examples, you will need your own Drupal install.

  • Goal: Create a company brochure/informational site using Drupal 5.x. For this example, we will use 'Aussie Helpers', a company that provides relocation/settling assistance for expatriates.
  • Functional Requirements:
    • The site will consist of the following pages:
      • About Us
      • Contact Us
      • Frequently Asked Questions
      • Products/services (listing, details, prices)
    • The content will be provided by non-technical marketing team
    • The email servers are unstable, but contact via the site has to be available at all times
    • A Drupal theme has already been selected as the visual look and feel of the site
  • Technical Requirements:
  • Drupalspeak: The Drupal tasks accomplished during this walkthrough:
    • Configuring Drupal
    • Installing and configuring a contributed module
    • Installing and configuring a contributed theme

* Installation steps described below

The following notation convention will be used to differentiate between navigating your file system (<folder>/<subfolder>) and navigating Drupal via a web browser (admin >> content). Implementation steps:

  1. Apply a the Stylized Beauty theme so as to evaluate the display/formatting of all new content
    1. Download Stylized Beauty
    2. Decompress it to <your install path>/xampp/htdocs/drupal-5.1/themes, resulting in <your install path>/xampp/htdocs/drupal-5.1/themes/stylized_beauty/*
    3. Change the theme being used by the site admin >> site building >> themes
      Select the theme to be used with your Drupal site/install
  2. To have meaningful paths to your content (e.g. http://aussiehelpers.com.au/q=aboutus vs http://aussiehelpers.com.au/q=node/1), enable the Path module: admin >> site building, select Path and Save configuration
  3. Edit the site's meta data: admin >> site configuration >> site information:
    Name = Aussie Helpers
    Email = contact@aussiehelpers.com.au
    Slogan = Experts in helping expatriates in getting settled!
    Mission = To assist you in finding your new home, and getting settled in your new neighbourhood.
    Footer = © 2007 Aussie Helpers
  4. Provide the content stubs to be used by the marketing team.
    1. create content >> Story
      Title = About Us
      Menu Settings, Title = About Us
      Menu Settings, Parent Item = Primary Links
      Menu Settings, Weight = 0
      URL path settings = aboutus
    2. create content >> Story
      Title = Frequently Asked Questions
      Menu Settings, Title = FAQs
      Menu Settings, Parent Item = Primary Links
      Menu Settings, Weight = 1
      URL path settings = faqs
    3. create content >> Story
      Title = Services we provide
      Menu Settings, Title = Services
      Menu Settings, Parent Item = Primary Links
      Menu Settings, Weight = 2
      URL path settings = ourservices
    4. create content >> Story
      Title = Concierge Service
      Menu Settings, Title = Concierge Service
      Menu Settings, Parent Item = Services
      Menu Settings, Weight = 0
      URL path settings = conciergeservice
    5. create content >> Story
      Title = Pre-arrival Legwork
      Menu Settings, Title = Pre-arrival Legwork
      Menu Settings, Parent Item = Services
      Menu Settings, Weight = 1
      URL path settings = prearrivallegwork
    6. create content >> Story
      Title = Pre-arrival Mailbox/Address
      Menu Settings, Title = Pre-arrival Mailbox/Address
      Menu Settings, Parent Item = Services
      Menu Settings, Weight = 2
      URL path settings = prearrivalmail

  5. Install the add-on for managing 'Contact Us' submissions
    1. Download webform
    2. Decompress it to <your install path>/xampp/htdocs/drupal-5.1/sites/all/modules, resulting in <your install path>/xampp/htdocs/drupal-5.1/sites/all/modules/webform/*
    3. Select to use the new module with your Drupal site: admin >> site building >> modules, select webform and Save Configuration
    4. create content >> Webform (leave fields, other than the ones below, with default values)
      Title = Contact Us
      Description = Submit your feedback or request for information using the following form.
      Confirmation message = Your submission has been received. If a follow up is required, you will be hearing from Team Aussie Helpers soon.
      Add new textfield, Name = Your name (and mandatory)
      Add new textfield, Name = Your email (and mandatory)
      Add new textarea, Name = Your message (and mandatory)
      Menu Settings, Title = Contact Us
      Menu Settings, Parent Item = Primary Links
      Menu Settings, Weight = 3
      URL path settings = contactus

  6. Enabling WYSIWYG (graphical user interface) editor use by the marketing team.
    1. Create the marketing user (team of one for now): admin >> user management >> users, Add user
    2. Install TinyMCE and IMCE for WYSIWYG editing
      1. Download TinyMCE and IMCE
      2. Decompress them to <your install path>/xampp/htdocs/drupal-5.1/sites/all/modules
      3. Turn the modules on: admin >> site building >> modules
      4. Configure TinyMCE for use by 'authenticated' users
        1. admin >> user management >> access control, Select access tinymce for authenticated users and Save permissions
        2. admin >> site configuration >> TinyMCE, create a new profile
          Profile name = TinyMCE Profile
          Roles allowed to use this profile = authenticated user
          Default state = true
          Allow users to choose default: = true
          Show disable/enable rich text editor toggle = true
          Editor CSS = tinyMCE Default

  7. Final cleanup:
    1. To remove the 'submitted by <user> on <date>' on your pages disable Story and Webform on Display post information on admin >> site building >> themes
    2. To hide the Navigation menu from site visitors (non-logged in users), change the configurations on admin >> site building >> blocks, configure Navigation, select Show block for specific roles = authenticated user.

And your final result should look like:

Drupal tutorial, walkthrough, on how to create a corporate brochure/informational site