Step by Step

This page is a list of the steps followed in the class, during the hands-on portion. See Agenda for an overview of the entire agenda. Note that this just shows what the steps are, without much explanation of why (which will hopefully come from the instructor). The overall objective is to create a web site with a few basic pages and a photo gallery.

Getting Set Up

Make sure everyone has either a temporary web hosting account at WebEnabled (www.webenabled.com), or a local Apache, PHP, and MySQL stack: XAMPP (www.apachefriends.org/en/xampp.html), WAMP (www.wampserver.com/en/), or MAMP (www.mamp.info/en/index.html) to run Drupal on. A few notes:

  • To download XAMPP, scroll down the page to the Downloads section - the "download" buttons at the top are ads!
  • Both MAMP and WAMP need to be started from their control panel after installing (and possibly on each reboot?).
  • If using WAMP, you will need to enable Apache's rewrite module from the control panel.

Then we'll install Drupal 7 (steps below are for a local install):

  • Download Drupal 7 from drupal.org/project/drupal
  • Unzip the Drupal zip file into a subdirectory of your web root. To find your web root, navigate on your computer to your XAMPP, WAMP, or MAMP directory, and look for a subdirectory called 'www' or 'htdocs'.
  • Copy sites/default/default.settings.php to settings.php
  • Change privileges on the sites/default folder and the settings.php file so that everyone can write to them (this is probably only necessary in Linux and maybe Mac).
  • Make a MySQL database in phpMyAdmin (which you can find in your XAMPP/WAMP/MAMP control panel or application), and note the database name, user name, and password. I actually like to make a new user (from the Privileges screen), and check the "create database with the same name and grant all privileges" checkbox).
  • Run the install script (choose Standard install) by navigating to install.php in your Drupal directory. To navigate to the Drupal directory, start from your phpMyAdmin URL, remove the phpMyAdmin ending, and substitute "drupal-7.8" or whatever subdirectory you unzipped into.
  • Enter the database information on the first screen, and submit
  • Wait for installation to complete
  • Enter the site name, site email address, first user account information (master admin account), etc.
  • For a test site, disable the automatic checking for updates checkboxes

On WebEnabled, just select Drupal 7.x (e.g., 7.8 or whatever the current version is), and request a site build.

Getting Started with Drupal

  • Install and enable Administration Menu module
    Learn: Basic module administration
    • Search on Drupal.org for the Administration Menu module.
    • Download the Administration Module zip file, and unzip to the
      sites/all/modules directory of your Drupal installation. (If using WebEnabled, you will need to unzip locally and use SFTP to transfer the files to the server in the sites/all/modules directory.)
    • Log in to your site with your administrative user name and
      password (if not already logged in).
    • Click on Modules in the top bar (the Overlay will open).
    • Enable the Administration Menu module (check the box). Disable
      the Toolbar and Shortcut modules (uncheck the boxes). Save the
      configuration.
    • Close the overlay, and see how the top of the page changes.
  • Install and enable other modules we will need
    Practice: Basic module administration
    • Do the above procedure for the Pathauto, Advanced Help, and Views
      modules.
    • Note that when enabling Views, you also need "Views UI" (which is the
      part of the Views module that lets you use the user interface -- we'll
      get to that...).
    • Note that for Views and Pathauto, you will at first not be able
      to check the box to enable them, because required dependencies
      are not there: CTools (Chaos Tools) and Token. So you will need
      to download those modules before enabling the others. Also, if
      you enable Pathauto before also enabling Token (for instance),
      you'll get a message saying Token must also be enabled. Confirm
      and all will be well.
  • Install and change the theme
    Learn: Basic theme administration
    • Search on Drupal.org for the Marinelli theme.
    • Download the zip file, and unzip to the
      sites/all/themes directory of your Drupal installation. (If using WebEnabled, you will need to unzip locally and use SFTP to transfer the files to the server in the sites/all/modules directory.)
    • Log in to your site with your administrative user name and
      password (if not already logged in).
    • Click on Appearance in the top bar (the Overlay will open).
    • Find the Marinelli theme, and click the "Enable and set default"
      link.
    • Close the overlay, and see how the look of the page changes. Note
      that the content of the theme is still the same.

    Now try changing some of the theme settings:

    • In the Admin menu (top bar), navigate to Appearance | Settings /
      Marinelli.
    • Experiment with the settings for this theme (note that different
      themes have different settings -- this one has some settings for layout and
      for the banner images that you might want to change).
    • You can make it so the banner is only for the home page by entering
      <front> for the "Visibility" for each image.
    • Note that you have to save the settings and then close the Overlay to
      see the changes. Or you can work in tabs -- if you open the administrative
      links in new tabs, you can switch tabs to see the effects.
  • Set up Pathauto (URL alias patterns)
    Learn: Pathauto module administration
    • Visit Structure | Content Types to see what content types are available
    • Visit Configuration | Search and metadata | URL Aliases | Patterns
    • Under Content Paths, set the path to be just [node:title] by default, and article/[node:title] for Articles. This will make it so content whose title is "My Title" will have URL "my-title" if it is a Page, and "article/my-title" if it is an Article.
    • Save the settings.
  • Create a Home page
    Learn:
    Content editing, how to set site home page
    • Visit the Content Page. Then click on "Add Content", and choose
      Basic Page.
    • Create a page with title "Home" with some content in the body.
    • Save the page and note the URL (should be something like example.com/home)
    • Change the site's default home page to URL "home". This is on the Configuration | System | Site Information page (you might also want to add a slogan before you save the page).
    • Close the overlay and click the banner, to verify that your new content is now the site's Home page.
  • Add an About page to the site and main navigation
    Practice:
    Content editing
    Learn: Basic menu management
    • Add a new Page (navigate to Content, click on Add Content, choose Page).
    • Enter title "About", and enter some content in the body.
    • Save the page and note its URL ("about").
    • Go to Structure | Menus | Main Menu. Note that it currently contains
      a link to the Home page.
    • Click Add link. Enter title "About" and path "about".
    • Save (returns to the Main Menu list of links).
    • Change the order of the links so that Home is first, and save.
    • Close the overlay or switch tabs. You should see the new menu item appear in the top nav area of the site.
    • Click on this menu item and verify it takes you to the About page.
  • Add a Contact page
    Practice:
    Content editing
    Learn: Alternate method to add item to a menu
    • Add another Page (see above).
    • Enter title "Contact Us", and enter some content in the body.
    • Under Menu settings, check the "Provide a menu link" box. Enter title "Contact" and make sure the Parent Item is set to Main Menu.
    • Save the page and note that Contact is now in the menu. You can return to the Menu administration page to change the link order if desired.
  • Change the Date settings for the site at Configuration | Regional and language | Date and Time. You can choose your preferred formats for Long, Medium, and Short dates/times.

Content types, Fields, and Image styles

  • Create a custom content type "Photo"
    Learn: Content type and field basics: creating a content type, adding field, controlling display options.
    Practice: Pathauto administration
    • Visit Structure | Content Types | Add Content Type
    • Enter "Photo" as the human-readable name, and notice that "photo" is selected as the machine-readable name for the new content type. Put in a description, such as "Photo for the gallery".
    • Under Publishing options, uncheck "Promoted to front page".
    • Under Display settings, uncheck the box so that author/date information is not displayed.
    • Click Save and Add Fields.
    • Delete the Body field.
    • Add an "Image" type field -- label it Photo, name it "field_photo", and use "Image" as the "form element to edit the data". Click Save. Leave the Field Settings on the next screen alone and click Submit. On the next screen, enable the Alt text field, make the field Required, and save.
    • Add a "Long text" type field -- label it Description, use "Text area (multiple rows)" as the form element, and name it field_description. Notice that on the second settings page, you can choose to use plain or formatted (HTML) text. Either is fine. Save the settings.
    • Click on the "Manage Display" tab. Make the label for the Photo and Description fields "Hidden" by default. Click on "Teaser", and hide both labels and the Description field in Teaser view, and show the Image field.
    • Visit Configuration | Search and metadata | URL aliases | Patterns. Under Content path settings, make the URL for Photo be photo/[node:title]
    • Close the Overlay to update the admin menu.
  • Add Taxonomy (categories) to Photo type
    Learn: Basic taxonomy management
    • Visit Structure | Taxonomy
    • Click on "Add vocabulary" to add a new Vocabulary. Call it "Photo gallery".
    • Click on "add terms" to add some terms to this vocabulary, such as "Friends", "Scenery", and "Around town"
    • When done adding terms, click "List" to see the list.
    • Return to the Content Types page (Structure | Content Types) and manage the fields for the Photo content type.
    • Add a new field of type "Term reference". Call it Photo Gallery (machine name field_photo_gallery).
    • On the Field settings page, make sure the Photo gallery vocabulary is selected. On the second settings page, make the field required.
    • Close the Overlay to update the admin menu.
  • Create Photo content
    Practice: Content editing
    • Visit Content, and click on Add Content. Choose Photo as the type.
    • Enter a title and description.
    • Upload a photo, and after clicking Upload, enter the alt text. If you don't have any photos handy, there are samples on the Notes and Resources page. You will need to first download them to your laptop.
    • Assign the photo to a gallery.
    • Save the photo item. Note the URL that is automatically created, and how the photo item is displayed.
    • Repeat to create a couple of photo content items.
    • Visit the Content page to see your photo items listed (along with the other pages you already created).
  • Set up Image styles
    Learn: How to make images display in different sizes
    • Visit Configuration | Media | Image styles | Add style
    • Enter "large_image" as the name, and click "Create new style".
    • Add a "Scale" effect. Set the maximum size to 500 pixels wide. Leave the Height setting blank.
    • Repeat this process to make a "gallery_thumb" style, with a Scale and Crop effect to 100x100 pixels.
    • Close the Overlay to make sure everything is saved.
    • Return to the Manage Display page for the Photo content type (Structure | Content Types | Photo | Manage Display).
    • On the defaults page, click the * button to open the settings for the Image field display. Choose image style large_image, and link to File. Click Update and then click Save.
    • On the teaser page, click the * button to open the settings for the Image field display. Drag the photo field to the non-hidden section. Choose image style gallery_thumb, and link to Content. Click Update and then click Save.
    • Visit the Content page. Find one of the photo items you created. Click the link to see how the display has changed.

Views and Blocks

  • Make a photo gallery page
    Learn: Creating views
    Practice: Menu editing
    • Visit Structure | Views | Add new view, to add a new View.
    • Give it a name of "Photo gallery" (machine name will be photo_gallery).
    • In the "Show" section, choose Content of type Photo, sorted Newest first.
    • Make sure "Create a page" is checked. Make the page title be Photo gallery, at URL path "photo-gallery". Have it display 12 items in a grid of teasers, without links or comments. Check the box to add a menu link, and add it to the Main Menu.
    • Click "Continue and edit".
    • Change the Settings for the Grid style to have 3 columns. Look at the rest of the settings, and check the Preview below.
    • Click "Save" to save the view.
    • Use the "View page" link near the top to navigate to your gallery page and see how it looks.
    • To change the order of the main menu, navigate to Structure | Menus | Main menu. Drag to change the order, and save. Close the overlay to see the change.

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

  • Make a latest photo block
    Learn: Blocks system
    Practice: Editing views
    • Visit Structure | Views, and click "Edit" for your gallery view.
    • Click the "Add" button near the top to add a "Block" display.
    • In Block settings | Block name, enter "Latest photo".
    • Change the block title to "Latest photo". Make sure to override for just the Block display.
    • Click Grid next to Format, and override the format (just for the Block view) to be Unformatted list.
    • Override the Pager settings (just for this block view), so that only 1 item is displayed with no pager (Display a set number of items).
    • You should now see just your latest photo in the preview below.
    • Click "Save" to save the view.
    • Close the Overlay to make sure everything is saved.
    • Visit Structure | Blocks.
    • In the First sidebar section, change the Navigation block to "None" to disable it.
    • In the Disabled section, change the Latest Photo and Who's Online blocks to First Sidebar to enable them.
    • Return to First Sidebar and change the order of the blocks.
    • Save and close the overlay to see the changes.
    • Visit the Photo Gallery page and notice that you probably do not want the latest photo block displayed on that page.
    • Return to Structure | Blocks.
    • Click "configure" next to the Latest Photo block.
    • In the Visibility section, enter "photo-gallery", so that this block will not show on the photo gallery page.
    • Save and close the overlay to see the change. Verify that the block appears on pages other than the photo gallery.

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