Step by Step - 2009

This page is a detailed list of the steps followed in the class, during the hands-on portion. See Agenda for an overview of the entire agenda.

Getting Started with Drupal

  • Install Drupal
    • Point browser to URL for your student sandbox -- you should see the Drupal install screen.
    • Choose "Install in English". Enter database information.
    • On the "Configure site" screen, choose a name for the site, enter an email address, and set up your master user name.
  • Enable Admin Menu and Admin Role modules
    Set up Administrator Role and admin user
    Learn:
    Basic module administration, basic user/role administration
    • Go to Administer / Site Building / Modules, and enable the two modules - note new menu at top!
    • Go to User Management / Roles, and create a role called "Administrator"
    • Go to User Management / Admin Role, and select "Administrator" as the admin role
    • Look at User Management / Permissions - verify Administrator has full permissions
    • Add a user at User Management / Users
      • Make sure to set to Active!
      • Each user must have a different email address!
      • Assign to Administrator role
    • Log out and log back in as this new user
  • Enable other modules we will need at Site Building / Modules
    Practice: Basic module administration
    • Under CCK - Content, Content Copy, Option Widgets, Text
    • Under Core - enable Path and disable Comment
    • Under Date - Date, Calendar (other required modules will be enabled automatically)
    • Under Other - Backup and Migrate, Path Auto, Advanced Help
    • Under User Interface - WYSIWYG
    • Under Views - Views, Views UI
  • Change the theme to Pixture Reloaded at Site Building / Themes and configure the new theme.
    Learn: Basic theme administration
  • Set up Path Auto (automatic URL aliases)
    Learn: Path Auto module administration
    • Visit Content Management / Content Types to see what content types (AKA node types) are available
    • Visit Site Building / URL Aliases / Automated Alias Settings
    • Under Node Path Settings, set the path to be just [title-raw]
  • Set up WYSIWYG (visual HTML editor)
    • Visit Site Configuration / WYSIWYG
    • Choose FCK Editor as the HTML editor for the two input formats and save.
  • Create a Home page
    Learn:
    Content editing, how to set site home page
    • Visit Content Management / Create Content / Page
    • Create a page called "Home" with some content in the body.
    • Save the page and note the URL (should be something like st1.poplarclass.com/home)
    • Change the site's Home page to URL "home" on Site Configuration / Site Information and save
    • Click the banner and verify you get to the Home page
  • Edit Primary Links menu
    Learn:
    Basic menu management
    • Go to Site Building / Menus, and click on "Primary Links" to edit the built-in Primary Links menu
    • Click Add Item. Enter path "home" and title "Home".
    • When you save this menu item, you should see it appear in the top nav area of the site (depending on your theme)
  • Add an About page
    Practice:
    Content editing
    Learn: Alternate method to add item to a menu
    • Visit Content Management / Create Content / Page
    • Enter title "About", and enter some content in the body.
    • Under Menu settings, enter title "About" and choose menu Primary Links
    • Save the page and note that About is now in the menu - but in the wrong position (alphabetical)!
    • Edit the page (click on the Edit tab). Change the weight under Menu Settings to 5 and save, and the menu order will be fixed.
  • Change the Date settings for the site at Site Configuration / Date and Time / Formats
  • Make a backup of the database at Content Management / Backup and Migrate

Content types and CCK

  • Create a custom content type "Event"
    Learn: CCK module basics: creating a content type, adding field, controlling display options. Also how to turn off display of author/date on content types.
    Practice: Path Auto administration
    • Visit Content Management / Content Types / Add Content Type
    • Enter "Event" as the human-readable name, and "event" as the machine-readable name for the new content type. Put in a description, such as "Event to go in the event calendar".
    • Under Submission Form settings, change the name of the Body field to Details.
    • Under Workflow settings, uncheck "Promoted to front page".
    • Save the content type. Note where these fields are displayed on the Content Types page.
    • Click "Manage fields" next to the new Event content type.
    • Add a "Date" field -- label it Event Date, and name it field_event_date. After submitting, make the To Date required for the field, change the Input format to one that uses AM/PM, and save settings.
    • Drag the Event Date field up to right under Title, and save.
    • Click on "Display Fields". Make the label for the Date field "Inline", and save.
    • Visit Site Building / URL Aliases / Automated alias settings. Under Node path settings, make the URL for Event be event/[title-raw]
    • Visit Site Building / Themes / Configure. Uncheck the box that says "Display post information on Event" and save.

    Note: The Notes and Resources page has an export of this content type.

  • Add Taxonomy (categories) to Event type
    Learn: Basic taxonomy management
    • Visit Content Management / Taxonomy
    • Click on "Add vocabulary" to add a new Vocabulary. Call it "Event type", and assign it to content type Event.
    • Click on "Add terms" to add some terms to this vocabulary, such as "Lecture", "Workshop", and "Meal"
    • When done adding terms, click "List" to see the list.
  • Create Event content
    Practice: Content editing
    • Visit Content Management / Create content / Event
    • Create a Lecture event, making sure the date is in the future.
    • Note the URL created, and how the event date is displayed.
    • Repeat to add a Workshop and a Meal event.
    • Visit Content Management / Content to see your events listed.
  • Make a backup of the database at Content Management / Backup and Migrate

Views

  • Make an event calendar page
    Learn: Editing views
    Practice: Menu editing
    • Visit the Views administration page at Site building / Views
    • Enable the default "Calendar" view
    • Click on the "calendar" link, to see what it looks like. Notice that ALL of your page and event content is shown on today's date -- it is showing content by the last updated date, which is NOT what we want!
    • Go back to the Views administration page (Site building / Views) and click "Edit" to edit the Calendar view
    • In the Filters section, click on "+" to add a Node: Type filter to make it show only Event content.
    • Try out the Preview section below (choose Calendar Page) to see the effect.
    • In the Fields section, click on "+" to add the "Content: Event Date - From Date" field. Change the Label to None, and the Format to "display From date only".
    • In the Sort section, click on the "Node: Updated Date" link and remove that sort. Click on "+" to add a new sort on the "Content: Event Date - From Date" field.
    • In the Arguments section, click on the "Date: Date(node)" link, and change it from using Updated Date to Event Date (From) in the Date Fields section. At this point, you will see the preview below change, as the events will move to their Event Date (DO NOT click on Prev/Next Month to see them!).
    • In the Fields section, click on the "Node: Updated Date" field and remove it.
    • Save the view
    • Click on the "View Calendar Page" link to try it out.
    • We can make it even better! Go back to the Views Administration page (Site building / Views) and click "Edit" to edit the Calendar view.
    • Click on "Calendar Page" in the left column.
    • Click on "Legend Vocabularies" and select the Event Types vocabulary.
    • Click on "Legend Terms", and select colors for each event type (click the outer color wheel to choose a color, then somewhere in the inner box to choose brightness/saturation).
    • Save the view, and view the Calendar page to see the effect.
    • Go to the Primary Links menu editor (Site building / Menus, and click on Primary Links). Add a new menu item with path "calendar" and title "Event calendar". It should appear in the top navigation (you may need to drag items to change the order). Verify that the menu link works.

    Note: The Notes and Resources page has an export of this view.

  • Make an "Upcoming Events" block for the sidebar
    Learn: Basic Blocks administration
    Practice: Views editing
    • Visit the Blocks administration page (Site Building / Blocks)
    • Find the "Upcoming" block and drag it to the Left Sidebar section. Save the page.
    • Click "Configure" next to the Upcoming block. Change the title to "Upcoming Events". In the "Page specific block visibility" section, make it not display on the calendar page. Save the configuration, and navigate to Event Calendar to see the effect.
    • Notice that the Upcoming block has the same problems the calendar had -- it displays all content types, and it displays by Updated Date instead of Event Date!
    • Edit the Calendar view again (Site building / Views) and click "Edit" to edit the Calendar view). In the left section, click on Upcoming to edit the Upcoming block specifically.
    • In the Filters section, click on "+" to add a Node: Type filter to make it show only Event content.
    • In the Fields section, click on "+" to add the "Content: Event Date - From Date" field. Change the Label to None, and the Format to "display From date only".
    • In the Filters section, click on the * next to the "Date: Date(node)" filter, and change the field it is using to "Content: Event Date - From Date"
    • In the Fields section, click on the "Node: Updated Date" field and remove it.
    • Save the view, and verify that the Upcoming Events block is working correctly.

    Note: The Notes and Resources page has an export of this view.