Book 1 - Drupal Basics By Karl Binder, The Adhere Creative Ltd. 2010.
This handbook was written by Karl Binder from The Adhere Creative Ltd as a beginners user guide to using a Drupal built website. It is meant as an end user guide, not a developer guide, and covers the basics of using Drupal s core functions to control your website content. The Adhere Creative Ltd Studio 34, Fazeley Studios 191 Fazeley Street Birmingham B55SE www.theadherecreative.com 2
Contents Introduction Common Terminology Logging in Creating and Managing Content Custom content types The WYSIWYG Editor Managing Taxonomy Vocabularies and Terms Managing Users and Roles Views and Blocks Forms Understanding Browser Differences Further Reading 3
Introduction Drupal is the name of the content management system that is driving your dynamic website. It s purpose is to provide a system for you to be able to update and manage your website content via a web interface, rather than relying on coded, static pages that require a web developer to change. The content management system stores your website content and settings in a database, so your content can be easily edited and delivered via your website s front end theme. As a site administrator you will be able to log in and manage your content and other elements of your website directly online, without needing any prior knowledge of HTML or the other languages that make up your website. 4
Common Terminology Drupal uses common phrases and words to refer to things within your website s system. Below is a handful of these that are most common... Node A common term within Drupal is node. A node is a piece of content on your website. This might be a page, an image, an event and so forth. Each piece of content is stored individually within your database as a node. Each node has fields such as it s Title, Body and Author Name. Nodes can be assigned to Taxonomy Terms (see below) to organise them in to categories. Taxonomy Taxonomy is the name given in Drupal to organising your content in categories. A vocabulary is a category container. For example the categories Meat, Vegetables, Fish, Pudding could be listed within the vocabulary Food. The categories themselves ( meat, vegetables, fish etc... ) are referred to as Terms. Content can be assigned to Terms so you could create a page called Lasagna and assign it to the Term Meat. You could then display a category page, listing all content in the Meat category and Lasagna would display in the list. Block Blocks are used to display chunks of content on the web page. These usually contain lists of information, menus or other calls to action. For example a main menu can be displayed as a block and told to appear in the region (see regions, below) Menu Bar. Another block could be the log in form and told to appear in the region - Right Hand Column. Blocks are managed in the Site Building > Blocks settings page. You can also specify certain blocks to appear for specific users only. Region Regions are areas within the webpage that are defined within your website s theme where block content can be placed. Common regions are Left Menu, Right Column, Header and Footer. 5
Cron Cron (short for chronograph) is a command scheduler that executes commands or scripts (groups of commands) automatically at specified time/date intervals. Drupal uses a 'cron job' to perform periodic tasks that help Drupal to run smoothly and efficiently. Modules Drupal modules are blocks of code, installed within your content management system, that perform specific functions within your website. Core modules within Drupal include Search, Taxonomy and Users. There are thousands of additional modules that perform specific tasks such as E-commerce, Statistics, Image Galleries and so forth. Modules add functionality to your site. The core installation of Drupal includes a selection of modules which are known as core modules. There are several key core modules that you should consider enabling on any Drupal website include Upload for uploading files, Path (see below), Search for enabling the site search and Menu for setting up and using menus on your site. Path Within Drupal the path is the last part of the web page s URL. For example you may create a page with the node number 7. The URL would be http://www.yourwebsite.com/node/7 (if clean URLS are turned on) or http://www.yourwebsite.com/index.php?q=node/7 (is clean URLS are NOT turned on) You can customise the URL of your website pages by using the URL drop down when editing a node. You can add a friendly name to your URL, such as aboutus then your node 7 would become http://www.yourwebsite.com/aboutus Views Views is a Drupal module that allows you to setup specific pages of collections of content to display to your users. For example you might set up a Latest News view that shows all of the nodes added to the News Taxonomy Term. Using views you could organise them by date, newest first, set how many nodes you want to show on the page at one time (such as 10 per page, with a paging function below) and 6
even what fields from the content are shown. You might show the node s title, a piece of teaser text and a link to Read more which would take the user from the view to the specific news node to read the full content. Views is a very flexible module that can be used to setup many different types of content display, such as calendars and image galleries. WYSIWYG WYSIWYG is an acronym for What You See Is What You Get. The WYSIWYG editor in your Drupal website allows you to edit content on your page and apply web site styles (such as Bold text, font colour and bulleted lists) without needing to add HTML code. You use a familiar word processor styled icon interface to edit the appearance of your website content. Google Analytics Google analytics is a free web service provided by Google that can provide visitor statistics about your website. An easy way to integrate it with your Drupal website is via the Google analytics module. Using this module you simply need to enter the reference number provided by Google for your domain into the settings page on your website and from then on Google will start collecting visitor data about your website. For more information on Google Analytics go to: http://www.google.com/analytics 7
OK, let s get started and Log IN This guide is written presuming you have administrator, or at least, content editor access to your website. In Drupal you can always get to the user log in page by going to the URL: http://www.yourwebsiteurl.com/user Figure 0 If you have a user log in block also on your website you can log in from there, this is no different, both lead to the same place and will log you in to the website. So enter the username and password you have been provided with. Once you are logged in your will see content and options that are specific to your user role. If you are the website administrator you can now go to: http://www.yourwebsiteurl.com/admin This will show you the main Drupal admin. What you see will depend on your access permissions. If you are the main site administrator you will see all the options that are available to you (see figure 1). 8
Figure 1 The display of the admin options will differ depending on your administration theme, but the common functions and naming will remain the same. Admin menu bar A useful Drupal module is the Admin Menu Bar. This adds a black drop down menu to the top of your website once you are logged in as admin. This is a very good way of moving around the administration areas of your website (figure 2). Figure 2 Drupal gives you the option of editing content directly in the front end of your website, using the same theme as what is displayed to the end user, OR by using a separate Administration theme. Depending on the style of your website there are benefits to both. For this guide we will use the administration theme slate as the example admin theme (figure 3). 9
Figure 3 10
Creating Content Now that you are logged in we can get started creating content. From the black admin menu bar, or from the administration options choose: Content > Create Content > Page There might be other types of content available for you to create, such as images, stories, events, bookings, news and so forth, depending on what has been set up within your site. The process is much the same for each, but on this occasion we are creating a standard website page (figure 4). Figure 4 You now have a form in front of you where you can start directly adding your content. First you need to give your page a title and add the body content of the page. In Figure 4 you can see that the body section of the page has a WYSIWYG editor to allow you to style your content. 11
Menu Settings Within this form is a section called Menu Settings. This allows you to create a menu link from one of your site s menus (such as a main menu bar) directly to this page as you create it. Figure 5 The menu link title is the wording that will appear in the menu to your users. The Parent item allows you to specific where in your menu structure (and which menu, if you have multiple menus set up) your link will appear. The weight allows you to set where in the menu order the link will appear. The lower the number (weight) the sooner is appears. For example if you had menu links with the following weights (weight in brackets)... Homepage (5) About us (1) Contact us (3) Services (7)... the menu order would display as: About us, Contact us, Homepage, Services 12
Meta Data Meta data is used by search engines to help understand your website and rank it accordingly to people searching for content. Meta data is an additional module that can be added (called Nodewords at the time of writing) that will put this hidden content into your web pages for the benefit of search engines. If you have the meta data module installed you can add in here information to help optimise your site. (Figure 6) Figure 6 Search engine optimisation is too big a topic to cover in depth here, but this is an efficient way of adding meta data to specific pages on your website. 13
Authoring Information Figure 7 The authoring information section of the form allows you to modify the username and date that the node is created. If you do not alter this it will use your username (that you have logged in as) and today s date. You only need to change this if you want to assign the node to a different user or to post, or pre date the node. 14
Publishing Information Figure 8 The Publishing Information section allows you to control a few settings regarding the display of your content. If the Published box is ticked then the node will be viewable to your website users, if it is unticked then it remains as a draft, only viewable by you as administrator. Promote to front page will display this node on your homepage IF you have a dynamic homepage that display multiple node content. If you have a STATIC, or custom built front page then this might not have any effect. Sticky at top of lists tick box gives this node extra weight, like a featured item, so that if it appears in a date based list it could remain at the top of the list even if there were newer pieces of content available. URL path settings Figure 9 The URL Path settings section allows you to override the default URL of the page (such as node/7) with a string of your choice (such as aboutus ). If you have the Pathauto module installed a tick box called Automatic alias will create a user friendly URL for your page based on the page title. 15
File attachments Figure 10 If your web site content allows files to be attached to content then this section will allow you to browse for a file and upload it to the page. Files attached to a node will appear as a list by default below the body content of your node. Comment settings Figure 11 If your content type allows users to leave comments on your nodes then the Comment Settings section will appear on your form. Here you can override the default settings for the content in order to disable comments, allow people to read comments but no longer leave comments, or allow users to both leave and read comments on the node. Once you have finished editing your content you can click Save to finish and save your content into your website database. 16
Managing your content Once you have created content you have a few ways of editing it and managing it. When viewing a node logged in as administrator you will see an edit button available to you to edit the page. Depending on your website template the edit button may appear by the title of the page OR in the black admin menu bar (figure 12)... Figure 12 By clicking the edit button you are taken directly back to the editing form to edit the content of the page. If you need to browse your website s content you can use the administration interface to view all of your website s content. By using your admin menu bar and going to Content > Edit > List (or http://www.yourwebsiteurl.com/admin/ content/node/overview) you are presented with a page that lists all of your website content with a set of filters that allow you to filter down your content list (Figure 13). By using the filters you can display a list of all content of a specific content type (such as all images, or events). Figure 13 17
Custom Content Types Default Drupal content types include Page and Story. Other content types such as Image and Event are created when associated modules are installed. There is also a module called CCK (Content Construction Kit) that allows you to create bespoke content types for your website. Custom content types can be used to create content that needs specific fields, such as image uploads, drop down lists, dates, videos and so forth. Custom content types are created using the default Drupal options, of node TITLE, Body, Author name etc... and CUSTOM FIELDS. You can add different fields to your content type such as Date fields, Image uploads or references to other content types and uses. Custom content types are used to create bespoke pages on websites, such as Events, Locations, Bookings etc... The WYSIWYG Editor Figure 14 The What you see is what you get editor is a user friendly interface for styling content on your website nodes. The icons at the top of the editor allow you to style your content using familiar word processor images, such as text alignment, link icons and drop down options to style text. 18
Managing Taxonomy Vocabularies and Terms The category structure within your website is managed by means of taxonomy vocabularies and their terms. You can view a list of all vocabularies (figure 15) Figure 15... and then a list of terms in a particular vocabulary (figure 16). Figure 16 To add a new term to a vocabulary click on add terms next to the vocabulary name. Give your term a name and a description. 19
Managing Users and Roles Your website might have just a few users, used to allow access to your site for editors and contributors only, or it could have hundreds or thousands of users if your website is a community site or allows user creation for booking or buying online. To manage your users in the admin interface you need to go to People > Users > List. Here you can see a list of all the users registered on your website, with most recent users showing first (Figure 17). Figure 17 In this table you can see the username, whether they are an active or blocked user, when they registered (or were created) and when they last accessed the site. The Edit link allows you to edit that user s settings, such as changing their password or what roles are assigned to the user. 20
Roles & Permissions User roles allow you to create a set of permissions that can be given to users by means of assigning them to a role. For example, you might want to create a user role where people can create blog posts on the site, but not edit or change anything else on the website. For this you would create a new role, give it a name (such as Blog Writer ) then from within the People > Permissions (figure 18) page you would give the new role access to Create Blog Content, but not create or edit other content. Figure 18 The User permissions structure in Drupal is very, very flexible, but as a result contains a lot of options that can be a bit daunting at first glance. The key is to approach it one step at a time, first understand the roles and permissions that are already set up to do certain things, such as Leave Comments then as you become more confident about the user permissions you can create new roles and test them on test users within your system to see what a normal user with your new role can see and do. 21
Views and Blocks Views and blocks are 2 key modules for delivering dynamic content to your end user. Blocks are used to place chunks of content (such as menus, forms, logos etc..) into regions within your site template - such as displaying a menu block in a menu bar region at the top of your website. Views are used to create dynamic pages that are made up of multiple nodes on your website. A basic example of a view would be a latest news list. This view would take all nodes of the type news (if a content type was created specifically for news content) and be set up to display the most recent X (maybe 10 or 20) nodes by date order, most recent first. Views are a very powerful tool within your Drupal website. To see all views that are setup on your system go to Structure > Views (Figure 19) Figure 19 To edit a view click on the edit button next to that view in the list. You are then presented with a long list of settings and functions (figure 20) that make up the dynamic view page (and/or block - yes, views can be displayed in a block as well as a page on their own). 22
Figure 20 Basic settings of a view Below is a short explanation of the core basic settings for a view on your Drupal website: Name: Here you can give your view a unique name Title: This is the title that is shown on the page or block for this view Style: Here you can set the style of the view, such as displaying the view as a list, a table and a grid. Row style: Here you can display nodes in the view as fields, or as the whole node Use AJAX: Ajax allows you to load content in without refreshing the page, so if you have a pager (too many nodes to list on one page) you can use Ajax to page through these nodes without refreshing the page every time Use pager: The pager can be on or off in full or as a mini pager. These show numbers and next/previous links below your content if there are too many items to show on one page (as per the items to display below) Items to display: This number defines how many nodes to show per page in the view. If set to 0 it will be unlimited and show ALL nodes that match the criteria of the view More link: If selected to yes a more link will show if there are more nodes that match the criteria than can be shown Distinct: This will add a level of filtering to try and ensure duplicates are not shown 23
in the view Access: You can restrict the access to this view by role or permission Caching: This turns caching on/off for this view Exposed form in block: If set, any exposed widgets will not appear with this view. Instead, a block will be made available to the Drupal block administration system, and the exposed form will appear there. Header: Here you can manually add text to appear at the top of your view, before the view results Footer: Here you can manually add text to appear at the bottom of your view, after the view results. Empty text: Here you can set what text is to display if there are no results to show in the view CSS class: Here you can define a specific CSS class to be applied to the view. This is for designers and developers only. Theme: The theme information provides info for designers and developers concerning this view. 24
Forms A common way of adding customisable forms to your website is by installing and using the Webforms module. This creates a specific content type for Webforms and allows you to create your own forms and define what fields will appear in those forms, who the forms get sent to and so forth. All submissions of webforms via the website are then emailed to a recipient and also stored in the database to be viewed at any time by the website administrator. To create a new form go to: Content > Create Content > Webform You then add the basic form information as you would with any node, such as title, authoring info, description and so forth, but you also have a selection of bespoke settings unique to webforms, such as who the form is to be emailed to and what the email subject will be. Figure 21 - Basic webform settings 25
Once you have added the basic form settings you can then add/edit your webform components. These are the fields that are to be displayed on the form, such as First Name, Last Name, Company, Message and Email address. Figure 22 - Example webform components Form components usually take the form of text fields, text areas (multiple line text fields), email fields, radio buttons or checkboxes and select lists. With these elements you can easily construct dynamic forms for collecting data from your website users. 26
Viewing webform submissions As an administration you might be the person that receives the webform submissions in your mailbox. If you want to see all submissions for a webform on the site (you can access them because they are all stored in the database) you simply need to navigate to the form page on your website, and providing you are still logged in as admin you will see a new set of options next to the Edit and View buttons at the top of the page. Firstly there is Results. This takes you to a page where all the webform submissions are listed. Then there are other ways of displaying this data, in table format, an analysis or a CSV download (which you can open in a spreadsheet application like Microsoft Excel). Figure 23 - form options in the admin menu bar Figure 24 - Example form submission results list 27
Understanding Browser Differences It s important to remember that websites are a fluid medium and will display differently, sometimes in minor ways, sometimes in major ways, from browser to browser and from system to system. Differences in screen size, resolution, browser type, plugins, operating systems and toolbars all have a big effect on the way your website appears to the end user. So how you view it on your screen might not be exactly the same as how someone else is viewing your website. Embrace the fact that a website can flex with the platform and browser your users are using, don t be scared of it or treat it like a book that is to appear the same to everyone who sees it. Figure 25 - Browser Usage Statistics 28
Further Reading There is lots of reference material available for Drupal, although the majority of it is targeted towards developers and designers. Here is a list of recommended sites and books for further information: Users Online end user guide - http://drupal.org/node/6261 Drupal Online Handbook - http://drupal.org/handbook Drupal Video guides - http://drupal.org/handbook/customization/videocasts Drupal School - http://drupalschool.blip.tv/ Designers Books: - Drupal 6 Themes: Create new themes for your Drupal 6 site with clean layout and powerful CSS styling Developers Beginners Guide to Drupal - http://www.scribd.com/doc/2473970/beginners-guideto-drupal Drupal Dojo - http://www.drupaldojo.com Books: - Pro Drupal Development, Second Edition - Front End Drupal: Designing, Theming, Scripting - Learning Drupal 6 Module Development: A practical tutorial for creating your first Drupal 6 modules with PHP 29