The example project in this article by Timi Ogunjobi is based on a fictitious web site development brief, and it illustrates a practical way of applying Drupal to develop a personal site. Isaac Meredith Smart is a professor of Sociology at Drupelburg University. His need is quite simple, and all he intends to do is to build a personal web site that will provide some shameless publicity to promote him professionally. The objective is to give his students, as well as the entire academic community, as much information about himself as is decently permitted.

Isaac wants his web site to have the following features:

• An "About me" page—showing his personal profile and interests
• A page that will list all of his publications
• A Blog to tell the world what he is currently doing, with a list of the latest blog posts displayed on the front page
• A Contact form that site visitors can use to send an email to I.M. Smart

Theme

Smart has chosen the "AD The Morning After" theme (which is a contribution to the Drupal project) because he loves the design. The front page will feature a teaser for Smart's profile at the top of the content area, and a list of his most recent blog posts in a block at the bottom of the front page. The final layout of Smart's web site can be seen in the following screenshot:

Build I.M. Smart's site

Okay, this guy Smart doesn't appear particularly likeable does he, and isn't this quite typical of university professors? But let's put our prejudices aside for a couple of hours and get his work done for him. The major tasks in building the web site for Isaac Smart will be:

• To create a new Content type called "Publication", under which he can list all of his work
• To be able to allocate terms to describe each added work
• To be able to display a Page view of the list of publications
• To be able to create a Block view of the list of his daily blog posts
• To create a simple Contact form

Modules

In order to create the desired web site, we will be using some essential Drupal modules.

Optional Core modules

The following optional Core modules will be required:

• Blog—will enable him create his blog posts
• Taxonomy—will enable him to classify his blog posts
• Comment—will allow all visitors to his web site to comment on, and to discuss his blog posts and publications
• Contact—will allow site visitors to send him personal messages
• Upload—will allow the upload of files into content

Contributed modules

The following contributed modules will also be used:

• Taxonomy Menu—will allow taxonomy vocabularies to be transformed into menus easily
• IMCE—will give the ability to upload and manage files and images
• Image—will allow the inclusion of images in content

Basic content

Smart's site is quite basic. The About Me page can be safely created from the Story Content type, and that is what we are going to do. However, to add an element of danger to the project, we will be including a new Content type for his publications, and we will call it just that—"Publication".

Create a new Content type

By navigating to the Administer page of the site and then to the Content management section, we will find the Content types link.

If we access this page, then we will see the various Content types listed there. Here, we need to create a new Content type for "Publication".

To create the "Publication" Content type:

1. Click on the Add content type link at the top of the page. You will then be presented with a form.
2. Add the Content type description and the general rules for the adding and display of content for this new Content type, in the places where they need to be in the form. Here are some guidelines:
• In the Identification fields, add the Name and the Description of the Content type (in this case "Publication").
• In the Submission form settings, you can choose the titles that you want to give the fields. By default, you are presented with Title (for the title of the submission), Body (for the main story), and also fields specifying the minimum length of the article before it can be accepted for submission, as well as another place where you can describe submission guidelines for this Content type. Leave this at the system default setting.
• In the Workflow setting we need to determine the default options:
1. Do you want the article to be immediately published and available for use on the site, immediately after submission? If so, select the Published checkbox.
2. Do you want to promote the article to the front page? If so, select the Promoted to front page checkbox.
3. Do you want the article to remain at the top of the list of contents on the site? If so, select the Sticky at top of list checkbox.
• In the Comments settings panel, indicate whether you want to allow comments to be made on articles of this Content type or not, and if you do, how these comments will be handled. As previously mentioned, Smart wants to allow comments to be added to his publications by site visitors.

Categorize content

We first need to establish how the content is going to be organized for use on the site. This is quite easy because we have created only one new Content type, named Publication, that will have taxonomy terms—Books and Papers—attached to it. By doing this, we will have set the ground rules for how content will be created and displayed on the site.

Categories or terms may be used to further classify items that, even though they fall under the same Content type, need to be grouped with others with which they bear a close similarity. In this case, Smart's Publication list includes Books and Papers, which, even though they are both publications, would do well if grouped separately. So we must now create the new categories and establish relationships between these new categories and the new Content type.

Go to the Taxonomy link under the Content management section on the Administer page, and click on it to get to the Taxonomy page. If you have started a new site, then at the foot of this page, you will see a notice that there is no vocabulary available for your new categories. The vocabulary is a term by which a collection of categories (or terms) can be collectively described. In this case, let us create a vocabulary that we will call Publications Type. We will do this by clicking on the Add vocabulary link at the top of the page. This is what we will be entering into the form for this new vocabulary:

1. In the Identification panel, let us enter the Vocabulary name, and a Description, as well as any Help text that will guide Smart when he comes across this vocabulary. For Publication, we have used Publications Type as the Vocabulary name. For the Description, we have entered The type of publication. Is it book or paper? For the Help text, we will be instructing Smart to Select appropriate publication.
2. We need to associate this vocabulary with a Content type. We have created it specifically for Publication, so we will naturally select the Publication checkbox.
3. For the Settings, we declare that the selection of a term from this vocabulary is Required, and that Smart must choose a term from the supplied list. Moreover, because a Publication can be either a Book or a Paper but never both, a posted content may not have more than one term associated with it. Therefore, leave all of the other checkboxes with the system default settings.

The completed vocabulary page is shown in the following screenshot:

On returning to the Taxonomy page, we can see the new vocabulary that we have just created is listed. Now we need to add the terms for the vocabulary. We do this by clicking on the add terms link and completing the form that we will be presented with. At this stage, forget about the Advanced Options link at the bottom, because we only have a single level of terms.

If you click on the list terms link on the vocabulary, then you will be presented with a list of the terms that you have created, in the order that these terms will be presented to Smart. If you don't like this order, then just drag the ones you want to change to the location that you want.

Test the submission form

Now, let us test our content submission form and see how it works. In order to do this, you click on the Create content link (on the lefthand side of your page), and select Publication. You will then get a form, as shown in the following screenshot:

Using this form, Smart will be able to post the details of his many publications to his web site. However, he doesn't know a thing about HTML (which proves that he isn't so great after all) and will definitely have problems while uploading images into his posts. So, we will give him an easy way to do this.

Images

Download the IMCE and Image modules. Install and enable them. It is also essential that you have the Upload module enabled. The TinyMCE editor (even though it is not essential) will permit Smart to edit his pages without knowing any HTML. Download the editor, if this feature is required.

Having done this, return to Administer | Content management | Content types, and select the Publication Content type. At the bottom of the page, you will see a new panel for Image Attach settings. Enable Attach images, and now the Publication Content type will be ready to incorporate images. To confirm this, go to the Create content link for the Content type. Near the bottom of the page you will find the Attached images panel, as shown in the following screenshot, where you can upload images for your content. Do the same for the Blog entry, Story, and Page Content types.

If you have configured your TinyMCE editor correctly, then you can similarly post images into the Body of your article by using the image upload function in TinyMCE.

We will also ensure that the Attach images functionality has been enabled in all of the other Content types. Then, in the Workflow settings for each Content type, deselect the Promoted to front page checkbox, or else you will end up with a very unruly front page display.

Create the About Me page

The About Me page, as we have decided, should really be quite straightforward and will be created from the Story Content type, which is recommended for content that is static.

1. From the admin menu, click on the Create content link, and then select Story. This will give you a form, which is similar to the following screenshot:



2. The handy WYSIWYG (What You See Is What You Get) editor, which is an emulation of desktop software like MS Word or Open Doc (with which most people will probably be accustomed), will make it easy for Smart to create his personal information page, and format it to his satisfaction.

Tips and traps
We have used this approach because Smart is the only person having a personal profile on this web site. Otherwise, it will not be adequate, and we may have to call up some other modules, especially the CCK module, which will enable us to create new form fields to make submissions more intuitive (for example, to present defined fields for name, education, interests, and so on).

3. Because Smart wants this to feature on the front page, we will just promote the About Me page to the front page before saving it. The Menu settings field is optional, and it is only used if you want to add the item to the menu system. We will add the About Me page to the <Primary links>.

Ready-made plans for 12 different professional Drupal sites Instant Drupal – Build 12 exciting and simple web projects Expand and tailor the sample projects to your client's need Create quick prototypes of commonly used applications within hours Develop your own custom application by merging features from the example projects Apply easy methods to optimize the performance of your site http://www.packtpub.com/drupal-6-site-blueprints/book

Create Blog posts

Blog posts will be created in the same way as the other Content types.

Click on the Create content link on the admin menu and select Blog entry. This will give you a form similar to the one that we have used to create the About Me page. Smart will be able to type in his blog posts and save them. This is so very easy!

Create a Publication

Publications will also be created from the Publication Content type.

1. Click on the Create content link in the admin menu, and select Publication. This will give you a form similar to the following screenshot:



2. Select the type of publication that you are creating from the Publications Type drop–down list. Again, with the handy WYSIWYG editor, adding content is very easy.

Create a Contact form

Having enabled the Contact module, we will now configure this to send messages to Smart at his email address iamsmart@drupelburg.edu.

1. Go to the Administer page and select the Contact form link.
2. In the Contact form page, add a new category to the form and name it Website Feedback (or whatever you want). Also, enter Smart's email as the recipient.



3. The URL for the Contact form will be http://www.sitename.com/?q=contact. We will be adding this link to the menu later.

Display content

Now comes the fun part of nicely displaying the content for viewing.

Create quick menus with the Taxonomy Menu module

Now that we have learned much of what is required to post content into Smart's web site, let's take a look at how we may view the content that we have put in. Again, there are several ways to do this. My favorite "quick and easy way" is to use a module known as the Taxonomy Menu. What this essentially does is permits you to view the content on your site just by clicking on a menu link that corresponds to the title of a vocabulary term. Select the vocabularies that you want to include in your menu, and save the configuration. You will now see the links to items related to each vocabulary under the Navigation menu in the sidebar.

Menus

We now have all of our pages as Smart would want them, but the navigation could still be improved. What we are going to do next is to arrange all of the menu items so that they are easily accessible. To do this, we will have to visit the Menus link on the Administer page, which will bring us to the page shown in the following screenshot:

What we intend to do is to move all of the menu links of the site content pages, as well as the Contact form page under the Primary links menu. At the moment, most of them are still under Navigation. So let us visit the Navigation menu page.

1. Click on the edit operation in front of Publications Type, and when you get to the edit page, change the Parent item to <Primary links>.
2. Do the same for My blog. We will end up with a view of the page, as shown in the following screenshot:



3. There is one last item that we need to add, and that is the Contact form. Click on the Add item tab at the top of the Primary links page. You will be asked to define the Path, Menu link title, and Parent item of the Contact form. Set these as contact (as indicated while creating the contact form), Contact form, and select <Primary links> respectively. The completed form is shown in the following screenshot:

When you are finally returned to the Primary links page, you have the opportunity to rearrange all of the menu items as you wish by dragging them to the desired positions.

Latest blog posts

Smart wants a list of his latest blog posts to be shown on the front page. Doing this is a lot easier than you might think. Let's visit the Blocks page, by going to the Blocks link on the Administer page. We will see that a block already exists for Recent blog posts. Drag it to a position under Content. However, this will make the latest blog posts to show on all of the pages, despite the fact that Smart only wants them on the front page. So we will need to configure this block to show only on the first page. Click on the configure operation in front of the block, and for the Page specific visibility settings, enter node.

While we are on the Blocks page, let's also drag the Primary links block to the Left sidebar (where we want it in our theme). The Block title of the block can be set to <none> to remove the default Primary links title.

As IM Smart wouldn't allow anyone else to log in to his web site we could also disable the login form, by removing by setting the Region of the User login block to <none>, and then click on the Save button, at the bottom of the page, to finish.

Permissions

A couple of details still need to be sorted out. We have created the content, but as it presently is, not the entire site is visible to everyone, especially the Contact form. We must set these permissions via the Permissions link on the Administer page. Make the access site-wide contact form permission accessible to all roles. Now, let us visit the front page to see what we have so far.

Finishing up

Smart has chosen the AD The Morning After theme to make his site more interesting. So we will now upload the theme and enable it.

The theme, once applied, confirms that all of the work required for I. M. Smart's site is finally done.

Summary

In this article, you have learned how to:

• Build a basic site for any purpose
• Create new Content types and vocabularies
• Organize your content for display, using the Core Menu module and also the Taxonomy module

In real life, you may have more Content types and more content pages that are linked to the menu, such as the "About Me" page and a larger number of content categories, but the procedure basically remains the same.

Ready-made plans for 12 different professional Drupal sites Instant Drupal – Build 12 exciting and simple web projects Expand and tailor the sample projects to your client's need Create quick prototypes of commonly used applications within hours Develop your own custom application by merging features from the example projects Apply easy methods to optimize the performance of your site http://www.packtpub.com/drupal-6-site-blueprints/book

About the Author

Timi Ogunjobi

Timi Ogunjobi is a Technical Writer, Web Developer and Open Source Evangelist. Trained as an engineer, Timi has been developing web applications in several frameworks for more than 7 years and has also been writing for more than a decade on a wide variety of topics. Timi is the principal of Websesame – http://www.websesame.com – a software development and Technical writing company. Timi balances his time between programming, reviewing, writing, and contributing to interesting web-based and community projects. When he isn't working (which isn't that often) he enjoys playing jazz guitar and getting involved in outdoor activities principally cricket, golf, and swimming.