Drupalâ€™s popularity has lately been rising. Itâ€™s a great platform for setting up content management systems and community driven sites. Here, Iâ€™ll give a general overview of Drupal and build a simple site for a fake client. Weâ€™ll begin with outlining the clientâ€™s needs, installing and configuring a few modules, creating user roles and assigning permissions, and finally weâ€™ll add in some content. We wonâ€™t go into theming, as itâ€™s a bit out of the scope of this article.
1.Â A fake client
Letâ€™s start off with a fake client.
SmartMarks is a small marketing consulting firm, with 4 employees. Each employee would like their own blog. The site will need a few pages in addition to the blogs:
Shannon, the business owner, wants full control over the site. The rest of the employees (Bill, Jean, and Terry) should only be able to write blog entries, but Bill may publish links.
The contact us form will accept the userâ€™s name, phone, email, and a short message. Submissions of the contact form should be sent only to Shannon.
Sounds pretty simple, huh? Well with Drupal, a lot of this core functionality is already built in. Weâ€™ll use as much of the core functionality as we can, and weâ€™ll add in a few other modules to make building this site a breeze!
2.Â Install some stuff
First, start out by installing Drupal. Iâ€™ll be developing this one on my local machine, but you can install it anywhere you wish. For this tutorial, Iâ€™ll be working with Drupal 6.x.
To install Drupal, simply download (http://drupal.org) and unpack it, create your database, and visit http://localhost/ (or your own dev URL). Installation should be relatively simple for ya.
Youâ€™ll need to create a config file. You can copy /webroot/sites/default/default.settings.php to /webroot/sites/default/settings.php. Be sure to make it writable to the server. Also, leave a copy of sites/default/default.settings.php where it is; Drupal will use it during installation.
After your config file is created, you can go ahead and install Drupal.
On the next screen, youâ€™ll setup the first account for the site. This is the main administrator, or super user. This user will have permission to do anything and everything on the site.
And you can go ahead and specify a few server settings. If your server is configured for mod_rewrite URL rewriting, then you can go ahead and enable Clean URLs now. This will change your URLs from something like /?q=node/3 to just /node/3.
After successful installation, you can visit the site and login as the superuser.
3.Â Get some modules
For this site, weâ€™ll be using a few contributed modules. Weâ€™ll have to download those and activate them before we can use them.
All modules that youâ€™ll install will be placed in the directory /webroot/sites/all/modules. If the modules directory doesnâ€™t exist there, just make a new one and name it modules.
Make sure to download the modules compatible with the version of Drupal that youâ€™re using. Iâ€™m using Drupal 6.x.
4.Â Admin Menu
This module is a must have for working with Drupal. Itâ€™s not totally necessary, but it will save you loads of time.
Download it over atÂ http://drupal.org/project/admin_menuÂ and place it in /webroot/sites/all/modules
PathAuto & Token
Next, go grab a copy of PathAuto and Token. PathAuto is a module that will have Drupal automatically generate nice URLs. PathAuto requires Token to work.
Meta Tags (Nodewords)
Originally titled NodeWords, the Meta Tags module allows users to specify common meta tags, like meta keywords and meta description.
Get a copy of this module over atÂ http://drupal.org/project/nodewords
CCK (Content Construction Kit)
CCK allows you to easily create new content types, without ever having to write any code! Weâ€™ll use this for the companyâ€™s external links section.
Get CCK atÂ http://drupal.org/project/cck
The views module allows you to configure custom views for displaying content. Theyâ€™re very useful when you have complex content types and categories. Here weâ€™ll use Views to display Links.
Get the Views module atÂ http://drupal.org/project/views
Install some modules
After youâ€™ve downloaded and unpacked the above modules into /webroot/sites/all/modules, you can go ahead and install them.
Visit http://localhost/admin/build/modules to turn some of them on.
For this site, weâ€™ll need to install the following. Simply check the boxes and click â€œSave configurationâ€.
- Administration â€“ Administration Menu
- Core â€“ Blog
- Core â€“ Contact
- Core â€“ Path
- Content â€“ Content
- Content â€“ Text
- Other â€“ Meta tags
- Other â€“ Pathauto
- Other â€“ Token
- Views â€“ Views
- Views â€“ Views UI
5.Â Content Types
Before we work with users and roles, weâ€™ll create our Links content type. Each Link will need a title, URL, and short description.
Whatâ€™s a node?
Almost every piece of content in Drupal is stored as a single node. All nodes have a title and an optional description. By creating content types, you can add fields to the content type to extend the node.
In our case, each Link will need one additional field thatâ€™s not provided by default, the URL.
Create a Link content type
Weâ€™ll create a content type called Link. Weâ€™ll then add a field to the content type called URL.
In the name field, enter the human-readable name. In the type field, enter a unique name for the type. The system will use this name internally. You can make it up, but generally itâ€™ll look like a variable name, lowercase and underscored. Also enter a short description of the content type.
Next weâ€™ll modify slightly this content type from the general node. In the â€œSubmission form settingsâ€ group, instead of â€œBodyâ€, weâ€™ll title the body field â€œShort Descriptionâ€.
Next, weâ€™ll edit the â€œWorkflow settings.â€ Allow the link to be published by default, and disable automatic promotion to the front page.
And finally, disable comments on the Links.
Save the content type. If you visit the â€œCreate Contentâ€ page, youâ€™ll now see the new content type, Link.
Additional fields with CCK
So weâ€™ve got our base Link content type set up. But we need to add an additional field to each Link: URL. Visit http://localhost/content/types and â€œManage fieldsâ€ for content type Link.
Add a field titled â€œurlâ€, and name it â€œfield_urlâ€. Choose text data and text field.
Save it. Another page will come up, with some more options. The defaults are ok for this, so just contine by clicking â€œSave field settingsâ€. After this, the Link content type should appear like this:
Now letâ€™s set up a view for our new content type, Links.
Views can become quite complex, but for our example, weâ€™ll keep it very simple. Weâ€™ll make a page view that displays Links. Plain and simple
Visit http://localhost/admin/build/views to get started. Click the tab â€œAddâ€ to create a new view.
Name the view â€œLinksâ€ and choose type node.
The next few pages can grow quite complex, but be paitent. A bit of practice will get you more comfortable with views.
Firstly, weâ€™ll want our Links view to be a full page. So add a page display.
Weâ€™ll have to make some settings next. Change the name and title of the view to Links. Set the â€œRow Styleâ€ to node, and choose to display teaser and links.
Make sure youâ€™re clicking â€œUpdate Default Displayâ€ every time.
Set the Path to â€œlinksâ€. This will be the URL path and our page view will show up at http://localhost/links.
Then set a menu for the view. Choose â€œNormal menu entryâ€, title it Links, and put it into Primary Links. (More on menus a bit later).
The Basic Settings area should be similar to this by now:
And finally for the view, weâ€™ll need to setup a filter. The filter will allow us to restrict the view to only display nodes of type â€œlinkâ€.
Add a filter by using the â€œ+â€ button at the top of the Filters box.
Scroll down until you find the filter titled â€œNode: Typeâ€. Check itâ€™s box, then add it as a filter.
Choose a node type of â€œLinkâ€.
At this point, our whole view should look very simliar to the following.
Save the view. Weâ€™ll come back to it later.
7.Â Users, Roles, & Permissions
Next weâ€™ll set up some user roles and permissions, and then weâ€™ll create some real users. Refer to the site requirements above to refresh on what our users need to be able to do.
Only SmartMarks staff will be able to have accounts. Public registration will not be necessary for this site. So we need to restrict regsitration at http://localhost/admin/user/settings and disallow public registration.
Weâ€™ll need a couple of roles. Since Shannon wants full control, weâ€™ll need an Admin role. Since Bill can modify certain things that others canâ€™t weâ€™ll setup a Manager role. And finally, the rest of SmartMarksâ€™ employees will need to belong to an Employee role.
Create a role titled Admin.
Repeat the process to create two more roles, Manager and Employee. We should have something like this now.
Next, weâ€™ll define permissions for each of the roles. Visit http://localhost/admin/user/permissions to set up permissions. Set them up like so.
You may be wondering why we didnâ€™t give Manager too many permissions. This is because weâ€™ll set Bill to also be part of the Employee role, so Manager simply needs to be able to add and edit links. All of the permissions associated with Employee will be granted to Bill.
Now that weâ€™ve got roles and permissions going, we can create our sitesâ€™ users.
Go ahead and create these users at http://localhost/user/user/create, assigning roles to each of them. We should end up with something like this on http://localhost/admin/user/user:
8.Â Creating Contentâ€¦ Finally!
And finally we can start creating content. Weâ€™re well over halfway done at this point.
First off, letâ€™s begin with the home page. Visit http://localhost/content/add to create a new Page.
Enter the page title and some sample content for the home page. Set up a menu item for this page. You may also enter some meta tag info if youâ€™d like.
Leave the URL alias setting alone. Weâ€™ll let Pathauto handle it, and weâ€™ll set that up shortly.
Save the page and create another for the About page.
If you now visit the main page, youâ€™ll notice that weâ€™ve got a menu already going. These items come from the pages we just made and from the view we made for Links earlier.
Create some Links
Next, weâ€™ll create a few links. Visit the create content page again, but this time choose Link. Create a few links.
After weâ€™ve created a few links, we can visit the view for Links. Visit http://localhost/links to see our links. Hereâ€™s what Iâ€™ve got. Remember this is coming from the view we made earlier.
Drupalâ€™s built-in Contact module is totally sufficient for SmartMarks. Weâ€™ll just need to set it up. Visit http://localhost/admin/build/contact and click â€œAdd Categoryâ€ to begin.
Add a category for â€œGeneral Enquiriesâ€, enter Shannonâ€™s email as the only recipient, and set â€œSelectedâ€ to yes. This will cause this category to be the default for the contact form. (You could setup multiple categories to handle contact submissions for areas such as Sales, Support, etc.)
You may now view your contact form at http://localhost/contact
Create some blog entries
Last of the content, weâ€™ll make a few sample blog entries. We could log out, and then log back in as each user individually, creating a blog entry under each. Or, since youâ€™re already logged in as superuser, you can create a few entries and change the author to each user.
Visit http://localhost/node/add/blog and create a sample entry.
Under the authoring info, enter shannon. This entry will become Shannonâ€™s first blog entry.
Repeat that to create a blog entry for the other users (bill, terry, jean). Then visit http://localhost/blog to see the user blogs.
9.Â Finishing touches
We still have a few things to tidy up before weâ€™re done. We need to setup pathauto to handle automatic URL aliases, finish our menu, check out each user account, and then weâ€™ll add a few blocks to demonstrate a little about blocks.
Letâ€™s start with menus. Weâ€™ve already created a few menu items beneath the Primary Links menu. We did this when we created the view for Links and when we created each static page.
Visit http://localhost/admin/build/menu. Here youâ€™ll see several menus available. Choose Primary Links.
Choose â€œAdd itemâ€. Weâ€™ll create an item for the Contact form.
Note that the path is relative to the site root. So donâ€™t enter â€œ/contactâ€; just enter â€œcontactâ€.
Repeat the above to create another menu item for user blogs, using a path of â€œblogâ€. Then visit the tab â€œList itemsâ€ to view all the menu items within the Primary Links menu. Now we can reorder the items using the drag and drop handles on the left.
Make sure to save!!!
Now our primary links in the header should be complete and sorted.
Next up, weâ€™ll setup pathauto to handle our nice URLs. Visit http://localhost/admin/build/path.
Before we configure paths, letâ€™s remove any existing URL aliases. You can do this by visiting the tab â€œDelete Aliasesâ€, then just go ahead and choose all aliases and delete them.
Now weâ€™ll setup the automatic aliases under the tab â€œAutomated alias settingsâ€.
Open up â€œBlog path settingsâ€ and check the box to have the system â€œBulk generate aliasesâ€.
Now open up the â€œNode path settings.â€ Here weâ€™ll set up a few rules to handle paths for different node types. Use the replacement patterns (this is where the Token module comes into play) to set up appropriate paths. Make sure your URL alias scheme will produce only unique URLs! And be sure to have it â€œBulk generate aliases.â€
Then save. Then view â€œListâ€ again. You should see new aliases made for all of our existing content.
A note about URL aliases: Donâ€™t forget to delete aliases if you change your URL scheme and regenerate aliases. Deleting and recreating aliases may seem a bit scary, but the more you do it, the more confident youâ€™ll become in your URL scheme.
Shannon just informed us that she wants the site to highlight the companyâ€™s recent office move. This is a good opportunity to go over blocks.
A block in Drupal is simply a â€˜chunkâ€™ of content, be it a list of nodes, some static HTML, a few images, or whatever. Weâ€™ll set up a simple block to hold the notice about the office move.
Visit http://localhost/admin/build/block. Add a new block by using the tab â€œAdd blockâ€.
After adding a block, youâ€™ll have to assign it to a region for display. Assign it to the left sidebar on http://localhost/admin/build/block, andÂ donâ€™t forget to save!!!
You may also sort them with the drag handles, like menu items.
You should now see the new block displayed in the left sidebar after save.
Check user accounts
Now weâ€™re almost there. Just want to login as the users to make sure theyâ€™ve got the right permissions and that they can access the links to allow them to get stuff done.
Log out of the system and log back in as Shannon. Shannon is our administrator, so letâ€™s make sure sheâ€™s able to create/edit all content. After logging in as Shannon, we should see a link to create content.
Go through and login as each user. Just take a look to make sure each one has the permissions and links available to get stuff done. If they donâ€™t, try going back to administer user permissions, and verify that theyâ€™ve been granted the correct permissions. Or also make sure youâ€™ve correctly assigned roles.
Set the home page
We also need to tell Drupal to use our home page as the default home page. You can do this under http://localhost/admin/settings/site-information.
Before you change this data, though, we need to grab the node id of our home page. Visit our welcome page at http://localhost/welcome-smartmarks. Click or mouse-over the â€œEditâ€ tab; we just need the nodeâ€™s ID.
Our home page has a node id of 1, so weâ€™ll use that for the default home page. Visit http://localhost/admin/settings/site-information and enter some data. At the bottom, youâ€™ll see a field for the default home page. Enter â€œnode/1â€³.Â Note that weâ€™re using the node id becuase of pathauto. If we were to change the URL alias of the home page, then we wonâ€™t have to change its node id, since it will remain the same. Drupal will automatically print out the correct URL alias.
This overview only scratches the surface of what Drupal can do. Hopefully Iâ€™ve given you a good overview of how to get started with the system in building this very simple CMS.
Drupal supports multiple themes, and each user can even chose their own theme.
Building a custom theme is out of the scope of this tutorial. But you can download and install some contributed themes. A good starting place is over atÂ Theme Garden. Download and unpack themes into /webroot/sites/all/themes, then enable and configure them at http://localhost/admin/build/themes.Â Note that whenever you activate a new theme, youâ€™ll have to visit the blocks page to assign blocks to the themeâ€™s regions.
If youâ€™re ready to start building a theme, you might want to check out theÂ Theme Guide.
Good luck in your Drupal ventures, and feel free to ask questions! Also check outÂ http://drupal.orgÂ for more information and helpful articles.