Basic Web Design with Drupal 7

Figure 5. Product List View

Now that you've added the Product Type field, you can use it for grouping the products. To do this, in the Format section, next to the Grid link, click on the link for its Settings. Near the top of the box that opens, where it says "Grouping field", choose "Content: Product Type" from the list. Enter 4 in the field for the number of columns and then click Apply. The name of each item and its photo now appear in the display, but each product is grouped based on whether it's a pen or a pencil. A larger, bold-faced heading appears for each group. Click on the button near the bottom labeled "Update Preview", so that you can see the results of the query in MySQL generated by the view.

By default, the view sorts the groups of products in descending alphanumerical order, based on their Product Type headings. So, the pencils display before the pens. Because there's more money in pens than mechanical pencils, you might want to put pens first. You can reverse the order by adding a Sort Criteria for "Content: Product Type" and setting it to "Sort ascending".

There's plenty more that you can do, but this is enough to get started. Click the Save button at the top right. Then, check the results of your efforts by opening the page that users will see (/product-lists).

Figure 6. Product List Page

Notice in Figure 6 that the pens are grouped together, separated from the mechanical pencils. Because I entered content entries for four pens and four pencils for testing and set the number of columns to four in the view, the results are showing only four of each in one row. Had I entered eight pens, two rows of pens would show. The name of each pen and pencil functions as a link to the node, which presents a larger photo of the product, as well as all of the other information on the pen and any other fields I may have added. You can adjust the view to provide more information at this level. You also can have the links set to go to a different page generated by the view. And, you can change the formatting (that is, CSS using the CSS Injector module) to alter the colors and layout, as well as choose a different theme for Drupal. However, what I've done here demonstrates the basics of creating a content type and a view to filter and organize the data for a particular content, as well as how to display that data dynamically.

Other Considerations: Taxonomy

Having explained the absolute basics of using Drupal to manage and display data, I would be remiss in speaking on content types and views if I did not also mention the advantages of the Taxonomy module. Taxonomy is a property in which a vocabulary of related words are assembled. In the example site, I'm using the Product Type field to differentiate between different kinds of products available. This arrangement works fine if all you have are two kinds of products and rarely change them, but it proves cumbersome if the list of product types is long or were to change occasionally.

For instance, instead of just pen, you may want to distinguish between ball-point pens, felt-tip pens and fountain pens. You might want to have wooden pencils and mechanical pencils instead of just a product type of pencil. You may want to rearrange the ordering of the products so that red felt-tip pens appear above blue ball-points, but do not overshadow orange fountain pens. The more complex the list of product types, the less feasible it becomes to handle them within a field in the content type, and the more reasonable it becomes to adopt taxonomy instead.

The Taxonomy module allows you to create lists of custom values for use in organizing your products. Unlike, the present Product Type field, these values, called terms, provide more configuration options, allowing you greater precision in adding and arranging new product types.

Terms do not exist on their own in Drupal. Instead, you create them in lists called vocabularies. A vocabulary allows you to keep all related terms together so that you can add them as possible values for content types. Compared to the Product Type field in the example site, "Pen" and "Pencil" in the "Allowed values list" are terms, and collectively these terms are a vocabulary.

To create a vocabulary, go to the Administration→Structure→Taxonomy page, and click the "Add vocabulary" link (/admin/structure/taxonomy/add). In the Name field, enter "Product Types", then save. This returns you to the Taxonomy page, which has added an entry for Product Types. To add terms to your vocabulary, click the add terms link for Product Types. In the Name field, enter "Fountain Pen". Ignore the rest of the settings for now and click Save. The add term form re-opens. Continue to add terms for different types of writing instruments.

In order to use these terms with the products, you must replace the existing Product Type field with a new one that is linked to the new vocabulary. Go back to the Content types page at Administration→Structure→Content Types. On the listing for Products, click its "Manage Fields" link (/admin/structure/types/manage/product/fields). Click the Delete link for Product Type field. Then re-create the Product Type field, this time selecting "Term reference" for the Field column. On the field configuration page, at the bottom, from the drop-down list for Vocabulary select "Product Types", and then save.

The Products content types will update with the new field. Although it appears the same as the old field, the options available now are drawn from the Taxonomy, providing easier control over their arrangement and number.

Now that you have deleted the old Product Type field, the products list view no longer groups results correctly by types of products. To restore this feature, edit the Product List view to include the new field. Go to Administration→Structure→Views (/admin/structure/views), and click the Edit link for Product List. Then add the "Content: Product Type" field using the previous configurations. Repeat the steps given above to format your view, grouping products around the Product Type field. Save when finished.


You now should have a good sense of how to create content types and how to manipulate them with a view to display data in simple ways with Drupal 7. Now you can start creating your own Web sites and learn more as you go. Compared to other methods of building Web sites, Drupal may seem restrictive and awkward at first. However, in time, you will come to see that it's powerful and works well in an organization with many people of various technical backgrounds. Once you've developed a site, nontechnical users can add and maintain content easily. Plus, as a developer, with modules, you can add functionality easily with additional modules. If you would like to learn more about Drupal 7, see



Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.


Pierrere's picture

linux is information caos

Good but still many problems with security

Kiana's picture

We had to put up a new blog site recently and it was a toss up between Drupal and Wordpress. I was actually having fun with Drupal...until...some of the office IT wizards found several exploits right away that have not bee addressed yet. So it's back to the old school (WP) for me until it is fixed...

Drupal is the best option to

System development Glasgow's picture

Drupal is the best option to design websites and i always prefer to design my own with drupal.

latest version do not match correctly

webdesign's picture

It is worthknowing that Drupad 7 is being used for website designing under linux category, But i think sometimes latest version do not match correctly to the settings done in your operating system environments and give some unknown errors, so it should be carefully checked before using the updated version of Drupad 7. Web Design

Drupal, joomla, magento etc. all sucks...

Bilal SERT's picture

If you create someting for general purpose, you can be sure that it is gonna be complex and unuseful, just as drupal, magento and the others.
Please, stop developing free general-purpose interactive web stufs. They are making are lives miserable.
1. they are too complex to use
2. Installation can be difficult unexpectedly,
3. Maintenance is so so
4. After server failure, the stupid problems are really annoying

I stopped using Linux server, and free content development tools and then migrated to ms servers (AFTER 14 YEARS LATER), I relaxed.

Great info, but I took a

Gaston's picture

Great info, but I took a different approach. Im using Groobix Web Forms (, to create forms and embed them in my sites. Im not so friendly with coding. Works for me, hope that helps !

I should check it up.

Levi's picture

I think I should check it also. I am starting to hear only good words about Drupal 7 lately. I tried it once before but a long time ago and I thought back then, that it's not for me. Maybe I should really check it out. Thanks!

> Drupal uses MySQL for

Anonymouses's picture

> Drupal uses MySQL for storing data
Or PostgreSQL, SQLite, Mariadb, etc.

slightly inaccurate

webdev's picture

in D7 a content type is not a simple table with columns -- that was true in D6 with CCK.