11.1 Example

Let us go through the functionality of CCK by means of a simple example.

Often, products are described on websites. This can occur in the context of a catalogue or also in an online-shop. If you are a company, that services or sells, for example, real estates, cars, trucks, boats, air trips, fireplaces, seminars, courses of studies or you name it, you deal with structured data.

Lets stick with cars. Imagine you are a car dealer and you have two sites, at which you can station you cars. The cars you sell are new or used, you have two salesmen and one saleswoman, you work with several banks for the purpose of financing and ... I will stop here. This scenario is common and you surely know what I am getting at.

Let us create a simplified version with CCK. We need at least:

• an input form for the data of a site (name, driving directions)

• an input form for the data of a vehicles (type, manufacturer, description, price, responsible salesperson, site). Available sites and responsible salespeople should be selectable.

If you try to solve something of this kind with a conventional CMS, you will soon encounter difficulties and the complexity of programming. It is then often attempted to create a list with Microsoft Access or Excel, which is then exported and published on the Website. But this has come to an end!

11.2 Installing the necessary modules

We need two modules for the example, the CCK module and the IMCEIMAGE¹-module. The second module expands CCK and also appears in the module list its section. I use it because we already have integrated the IMCE file manager into the editor (see section 8.4 IMCE: An own media library for every user) and because it is practical to assign images this way.

Unpack the files imceimage-6.x-1.x-dev.tar.gz und cck-6.x-2.0-rc4.tar.gz in the folder /sites/all/modules.

Illustration 1: Module Folder with newly-installed modules

There is a new area in the form called CKK (illustration 2) in your modules directory (Administer – Site Building – Modules):

Illustration 2: CCK-Module

Activate all modules in this section.

11.3 Creating two new content types with additional fields

Create in Administer – Content management – Content types – Add content type two new content types: the content type site and the content type vehicles (illustration 3). Follow the instructions explained for press releases (see section 5.5.2: Create a new content type for press releases):

Illustration 3: New content types vehicle and site

For the time being, a specification for the title (place) and description (driving directions) of the content type site is enough.

The content type vehicle needs more fields, a field for two images, a field for the price and a field, which refers to the site. Therefore, click on the link edit (illustration 4) next to the content type vehicle.

Illustration 4: Adding a field with CCK 

Illustration 5: zusätzliche Felder im Fahrzeugtyp 

• The image of the vehicle is an IMCE Image- field for any desired number image of the vehicle of images. You need to enter the desired amount in the form field number of values. I choose four values, as I want to put up maximal four images. This setting exists in many fields, that allow multiple values. With some values it is possible to request additional fields by clicking on a button during the entry. Here, using the IMCE Image field, you need to decide on a fixed number of images.

• The price in EUR is a decimal number (Decimal). Choose Text field from the listed options as a widget type (form element).

• The site is a node reference. As a widget type I choose a select list. The field shall later contain a select list of all sites. Here you must make certain to check the content type in the bottom area of the form, from which the selection should result (sites).

11.4 User Rights

The preparations are, except for the to be set user rights, therewith finished. As an administrator, you have access to everything. The other user roles however need still to receive rights.

You can set the rights for content types in Administer – User management – Access Control. Furthermore, there is now a new area coming from the content_permissions-module (illustration 6): This module is part of the CCK package and allows you to set rights for self-created fields.

Illustration 6: User rights on the field level

I also allow guests to access the fields; editing, for the time being, takes place only through the administrator. In case you miss staff members – they have not been dismissed, but have been cut for the purpose of a better overview.

11.5 Data input

When clicking on the link create content, you can now enter test data in the existing content types site and vehicle. Create two sites and two or three vehicles. In order to be quicker with the vehicles, I have enclosed pictures on the CD. You can type the price as a whole number.

Should you have forgotten the node number, you can find your entries again under Administer – Content management – Content. Assigning images in the form works similar to the editor via the IMCE-data manager (illustration 7):

Illustration 7: Form for the content type vehicle

In order to assign every user an own directory, you need to create profiles according to user roles via Administer – Settings – IMCE. These profiles control the behaviour when uploading. They are valid for all users, that are assigned to this role. A separate profile is created for the administrator.

11.6 View on the Website

You can directly access the sites and vehicles on the Website. In case you forgot where the contents are, you find them again under Administer – Content Management – Content. The single view looks already very clear (illustration 8):

Illustration 8: The vehicle on the Website

By clicking on the link of the site (Berlin), you will get to the content of your site description.

11.7 Changing the design of the output

Everything looks pretty good already, but, nevertheless, most of the time a little change to the standard is desired. Thus, we will change the layout of the single view.

11.7.1 Creating a different layout – directly in PHP

As you have already seen in chapter 10, you can simply overwrite the node view and implement your own design ideas. For this purpose, copy the file /sites/all/themes/fourseasons/node.tpl.php and name the new one /sites/all/fourseasons/node-vehicle.tpl.php. The content of this file looks like in listing 1:

<?php phptemplate_comment_wrapper(NULL, $node->type); ?>
<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?><?php if ($page == 0) { print ' teaser'; } ?>">

<?php print $picture ?>
<?php if ($page == 0): ?>
<h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>
<?php if ($submitted): ?>
<span class="submitted"><?php print t('!date — !username', array('!username' => theme('username', $node), '!date' => format_date($node->created))); ?></span>
<?php endif; ?>
<div class="content">
<?php print $content ?>
</div>
<div class="clear-block clear">
<div class="meta">
<?php if ($taxonomy): ?>
<div class="terms"><?php print $terms ?></div>
<?php endif;?>
</div>
<?php if ($links): ?>
<div class="links"><?php print $links; ?></div>
<?php endif; ?>
</div>
</div>

Listing 1: node-vehicle.tpl.php

You can now adjust the file according to your wishes. Though you notice fast, that all important information is located in a big chunk called $content, whose individual fields cannot be accessed directly. One solution for PHP-experienced users would be the content display of the $node object:

<pre><?php print_r($node) ?></pre>

The result displays all elements of this array in the following format:

stdClass Object(

[nid] => 32

[type] => vehicle

[language] => en

[uid] => 1

[status] => 1

[created] => 1216993636

[changed] => 1216995297

...

)

The display is very useful, however, as a beginner it is not that easy to find the right notation for an access to the individual elements. But Drupal would not be Drupal, if there was not a more comfortable possibility. .

11.7.2 Installing the content template help module

The module content template is of real help, when dealing with the design of a content. Load the file contemplate-6.x-0.13.tar.gz via the project site² or the CD, unpack it in the folder /sites/all/modules and activate the module (illustration 9).

Illustration 9: Activate module content template

Following, you find a listing of all content types with the possibility to create templates under Administer – Content Management – Content templates (illustration 10)..

Illustration 10: Overview of the templates

Click on the link create template next to vehicle. In the area of the form body text – body variables, you have all variables of the content type in correct PHP notation at your disposal, for example, the variable for the second vehicle image $node->field_vehicle[1]['imceimage_path'] and its value /sites/default/files/u1/nissan_bild2.jpg (illustration 11).

Illustration 11: Variables for content type vehicle

Equipped with this knowledge, you can now tackle the representation of the vehicle's content with surgical precision.

The variable

$node->field_image[1]['imceimage_path']

contains the path to the second assigned image. In PHP, arrays start with a 0, thus the 1. When typing the PHP command

<?php

echo $node->field_image[1]['imceimage_path'];

?>

in the template, the path will be issued. As you probably do not want to see the path but the image, you need to insert the variable in the respective HTML-tag, for example:

<?php

echo '<img src=“'.$node->field_image[1].'“'. ['imceimage_path'].'>';

?>

11.8 How does it continue?

 You have now the possibility to give different user roles, including the field level, access to your small car management. What is still missing, is:

• a list of all vehicles, maybe even per site, type or manufacturer of the vehicle.

• When showing the site, a block along the side with the cars at that site could appear.

• Otherwise a slideshow of the vehicle's images would be nice. By clicking on the image, one should get to the respective vehicle.

The first two points will be covered with the views module in the next chapter.

The slideshow can now be completed quickly in this chapter!

11.8.1 A slideshow for the vehicles

The slideshow is configurable completely independently of your vehicles and works with JavaScript. You can see the mentioned example on the Website to the book.

http://drupal.cocoate.com/en/node/36

Load the modules slideshow creator (slideshow_creator-6.x-1.27.tar.gz) and JQuery Plugin (jquery_plugin-6.x-1.3.tar.gz) from the respective project Websites³ or the CD and unpack them into the folder /sites/all/modules. Activate both modules via Administer – Site building – modules.

The slideshow is used as a filter in an input format. Therefore, you need to choose the desired format in Administer – Settings – Input formats and activate the slideshow filter (illustration 12).

Illustration 12: Activate the content filter for the slideshow

Depending on the size of your images, you need to set the width and height of the slideshow. This can be done via Administer – Settings – Slideshow creator. In my case, 240 x 240 pixel fit well (illustration 13)..

Illustration 13: Slideshow settings

Depending on how you would like to position the slideshow on the page, you can, for example, create a new page or also a new block and enter the Slideshow Creator Code in square brackets:

...slideshow:Version,img=|Image_URL|Link|Title|Description|Target|, img=|Image_URL|Link|Title|Description|Target|]

Version: The version of the filter, currently 2

Following, you can enter as many images as you like, each separated by a comma.

Image_URL: URL of the image

Link: Link to a Web site, when someone clicks on the image

Title: The text above or next to the image (depending on the configuration)

Description: The text above or next to the image (depending on the configuration)

Target: If the image is linked, you can enter here a target (target attribute),

_blank (standard setting) opens a new window, _parent and _top are used for frames, and _self opens the link in the same window.

Now the already above mentioned example:

...slideshow: 2, img=|http://drupal.cocoate.com/sites/default/files/u1/smart1_bild1.jpg|http://drupal.cocoate.com/node/32|Smart Cabrio|The complete and utter driving experience|Smart|,img=|http://drupal.cocoate.com/sites/default/files/u1/smart1_bild2.jpg|http://drupal.cocoate.com/node/32|Smart Cabrio|The complete and utter driving experience|Smart|,Fun|Nissan|,img=|http://drupal.cocoate.com/sites/default/files/u1/nissan_bild1.jpg|http://drupal.cocoate.com/node/35|nobody knows|The complete and utter driving experience|Nissan|,driving experience|Nissan|,img=|http://drupal.cocoate.com/sites/default/files/u1/nissan_bild2.jpg|http://drupal.cocoate.com/node/35|nobody knows|The complete and utter driving experience|Nissan|]

Other than this given structure you can also show images from a folder, if you use:

...slideshow:Version, dir=|Image_Folder|Recursive|Link|Title|Description|Target|]

In this case the variables stand for:

Version: The version of the filter, currently 2

You can enter as many image folders as you like, each separated by a comma.

Image_Folder: the image directory

Recursive: Type "yes", if you would also like to include the subfolders; if you don't, leave it empty.

Links: Enter "yes", if you would like to link all images; if you don't, leave it empty. In our case a link to the list of vehicles, that we will create in chapter 12.

Title, Description and Target apply to all images.

...slideshow: 2, dir=|files/|yes||Our Vehicles|They could belong to you immediately!|]