Pages

Thursday, September 6, 2012

Getting Started with Drupal: A Comprehensive Hands-On Guide


Getting Started with Drupal: A Comprehensive Hands-On Guide
Drupal is a popular open source content management system. With its powerful and advanced features, you can build complex websites with ease, compared to building them from scratch. With the support of a huge community and a big number of available modules, no wonder Drupal is a system you keep hearing about over and over again.
In this guide, we are going to discover Drupal using a pragmatic approach. We will create a Drupal site with a custom content type and views.
Ready? Let’s dive right into this immensely powerful content management system.

Objectives

By the end of this guide, you will:
  • Learn the benefits and disadvantages of using Drupal
  • Install Drupal
  • Understand the Drupal back-end
  • Learn about Drupal modules
  • Explore the Administer page
  • Create and publish content
  • Create custom content types with the Content Construction Kit
  • Create Views
  • Create Page view displays
  • Create Block view displays
  • Learn about Drupal themes

What We Will Create

We will set up and develop a basic Drupal website with a job board that visitors can post job openings and projects to. The intention here is to get you started using Drupal by actually creating a Drupal site instead of just reading about it.

Why Use Drupal?

It is worth a few moments to discuss the benefits (as well as disadvantages) of using Drupal so that you can determine if it’s the right CMS for you.

Pros of Using Drupal

Open source: Yes, Drupal is open source. This means you get all the benefits of using an open platform.
Highly customizable: The main power of Drupal lies in its flexible nature. You can mould it into any type of content-centered/user-generated site: from a social media site that allows users to submit and vote on content, a forum, a job board, to an image gallery or a service for deploying portfolio sites for designers — Drupal can get it done (with a little bit of work on your behalf, of course).
Big and intelligent community: Drupal has one of the biggest and brightest open source community of supporters, users, and developers. This means great modules, quick bug fixes and core updates, great support, and a never-ending supply of amazing documentation and tutorials on the Web.
Modules: There is a huge amount of modules that extend the capability of Drupal. (We will talk about what modules are a little bit later.)
Developer-friendly: As a web developer, you will never feel any limitations while using Drupal. Drupal has been built keeping the needs of developers in mind. Some faults of a few mainstream CMSes is that there is a disproportionate focus on the end-user’s interface, and with that, means neglecting or focusing very little on the needs of the people who actually develop and deploy the CMS; this isn’t so with Drupal.
Built-in caching system: Drupal has built-in support for caching your web pages, which helps reduce the load on your web server, as well as speed up page response times. This feature eliminates some resource-intensive database queries, aiding your server in performing better.
Decent built-in search capabilities: Drupal, when compared to many CMSes out there, has a pretty good search feature baked right into its core. It still would not beat a third-party search API like Google Search or Yahoo! Search BOSS, but it’s still decent enough to use in production.

Cons of Using Drupal

Big learning curve: Yes, it’s a fact that Drupal is a bit harder to grok than other content management systems out there. I will not suggest you use Drupal if you want a website done in a week the first time you use it. It may take you some months toreally understand Drupal, and as much as a month to be able to deploy a fully custom site the first time around. However, I should also note that you can deploy a basic site in less than a day’s worth of work (and that’s what we will be doing in this guide).
Complex for non-developers: Since developers’ needs are prioritized with Drupal, for those that aren’t very familiar with computing technologies, Drupal might take a while to get used to. This means that professionals that only dabble in web development might not find it easy to develop (or even administer) Drupal sites.
Complex user interface: Drupal’s admin interface is a bit difficult to understand; it’s not as user-friendly as it should be. (That’s going to change soon, though.)

Drupal Versus WordPress

Whenever you talk about Drupal, there is always the inevitable desire to compare it to another leading open source publishing platforms; and that is usually WordPress.
And whenever you suggest that WordPress is not a fully featured CMS and that it is just a blogging platform will always generate a heated debate. I am myself a WordPress developer, but it’s a fact that sometimes WordPress is just not enough.
Rather than spending time in customizing WordPress, it’s the right decision to use a more robust CMS if you’re doing something very complex that involves user registration, authentication, custom permissions, custom user role, highly customized content types for sites such as user-generated social media sites, e-stores, forums, and so forth.
I will not suggest you use Drupal if your client only needs a blog or simple portfolio site with only a few pages and basic content types — it is quicker and easier to build these sites using WordPress. Using Drupal for these purposes seems like overkill.
Another major argument against using Drupal is its user interface, which is emphatically hard to learn for people who are not computer-savvy. This is a solid point where WordPress wins.

Websites That Use Drupal

For inspiration, here are a few sites that use Drupal.

Mozilla

Mozilla, the company behind Firefox, uses Drupal for almost all of its web properties. The official website of Mozilla and Spread Firefox are both built with Drupal.
Mozilla

Spread Firefox

Spread Firefox

Ubuntu

The official website of Ubuntu, a popular distro of Linux and the operating system that many web servers use, is built on Drupal. Study the enormous nature of the site and the variety of content types and features available on it; you will soon see why Ubuntu chose Drupal.
Ubuntu
Want to see more examples? Check out these other remarkable Drupal-powered websites if you would like to see more.

Downloading and Installing Drupal

We will use the latest stable release of Drupal 6 for this guide; download it here.
Downloading and Installing Drupal

Installing Drupal on XAMPP

We will install Drupal on our computers, but if you want to install it on a live web server, the process will be the same.
To install Drupal on your local machine, you will need a web server platform like XAMPPor WAMP. Don’t be intimidated if you haven’t heard of them; they are really very easy to install and use.
If you don’t have a local web server platform installed yet, install XAMPP now.
Below is a user-friendly guide written by Jacob Gube (Founder and Chief Editor of Six Revisions) that will get you up and running with XAMPP in no time flat (the tutorial is for WordPress, so just follow the first part of the tutorial, Steps 1-26 tweaking the steps by keeping in mind you are installing Drupal):
  • Using XAMPP for Local Development
This Drupal guide will assume that you are using XAMPP, so you might have to tweak the Drupal installation process if you choose another web server platform package.

Copy the Drupal Files to XAMPP Directory

Copy the Drupal package you downloaded earlier to xampp\htdocs. Extract the files and rename the folder to drupal for easy navigation.
Now go to the xampp\htdocs\drupal\sites\default folder.
Copy the Drupal Files to XAMPP Folder

Create settings.php

Make a copy of the file named default.settings.php and rename it tosettings.php.
Make sure that you don’t delete default.settings.php otherwise your Drupal installation will throw you an error; this is one of the most common mistakesbeginning Drupal developers make.
Create settings.php

Create a MySQL Database for Drupal

Drupal uses MySQL to store all the content, so we need to set up a MySQL database for it.
We will use phpMyAdmin — a browser-based MySQL database administration GUI — to make this easier (it comes with XAMPP by default).
Navigate to phpMyAdmin using your favorite web browser via the following URL:
http://localhost/phpmyadmin/
Create a MySQL Database for Drupal
For this example, I named the database db_drupal. You can give the root user permission with all privileges to the db_drupal database so that it can read/write/modify it if you want to save some time, but it’s not good practice to use root in a production environment. It’s better to create a new dedicated user just for the Drupal database and then only provide the needed permissions; we should do that next.

Create a New Dedicated MySQL User for the Drupal Database

For this example, I will create a new MySQL user called drupal_user. For production, it’s not a bad idea to use a user name that is obscure and random to minimize the event of a bruteforce attack being successful.
Definitely do not use root though as that is what most hackers will likely try first because the root MySQL user has super privileges that can access not only yourdrupal_db, but also your other databases. (In fact, it’s a good idea to delete and not use root at all and instead create a pseudo-root user, but that is another story for another day).
To create a new MySQL user, go to the home page of phpMyAdmin and then click on the Privileges tab.
Now click on Add a new user and then fill out all the required information.
Create a New MySQL User for the Drupal Database
Create a New MySQL User for the Drupal Database
While working on localhost (e.g. deploying Drupal in our computer using XAMPP), you can definitely select all the privileges, but in production, it is strongly recommended that you select only the privileges that drupal_user really needs.
In this example, I have selected only those privileges I want drupal_user to have.
  • Select
  • Insert
  • Update
  • Delete
  • File
  • Create
  • Alter
  • Index
  • Drop
  • Create Temporary Tables
  • Lock Tables
Create a New MySQL User for the Drupal Database
At this point, we are done with phpMyAdmin and any MySQL-related tasks.

Install Drupal Using the Installation Wizard

Now let’s point our browser to the following URL:
http://localhost/drupal
If you renamed the folder in htdocs to drupal, this should work. If not, replacedrupal in the URL string above with whatever folder name you used for the Drupal files.
When you navigate to the URL above, you will see the installation wizard of Drupal. You can select the language you want for the Drupal interface in the first page. Note that this option can be changed later from the Drupal back-end. We will continue with English, so let’s choose "Install Drupal in English".
In the next screen, Drupal will verify whether your web server (In this case localhost) is able to run Drupal or not. If your web server is missing server applications that are essential to Drupal functioning on it, then it will give an error message.
Next, you will see the Database configuration screen. Here you will have to give all the information you used in creating drupal_db and drupal_user.
Install Drupal Using the Installation Wizard
Still in the Database configuration screen, click on Advanced options and you will see an option named Table prefix which will append all Drupal MySQL tables with a string (e.g. blackjack_drupal_table). I recommend you use some random table prefix that will only make sense to you; this is a precautionary security measure to reduce the threat of a SQL injection attack on your databases.
Install Drupal Using the Installation Wizard
If you have done everything correctly then you will successfully move to the next screen where Drupal will install some necessary modules. You will be automatically directed to the Configure site screen after this is done.
Install Drupal Using the Installation Wizard
Options on the Configure site screen are mostly self-explanatory, so I will let you fill out the needed information yourself.
Install Drupal Using the Installation Wizard

Clean URLs Option

One thing many might not be familiar with is the Clean URLs option under Server settings. By default, the links generated by Drupal are unintuitive likehttp://localhost/index.php?q=21.
With Clean URLs enabled, your URLs will look nicer and will be more SEO-friendly, such as http://localhost/events.
The Clean URLs option requires mod_rewrite (an Apache module) to be installed in your web server — and it probably is installed already.
If mod_rewrite isn’t installed or running (highly unlikely if you’re on an Apache server), then Drupal will give you an error and you will not be able to use the Clean URLs option. It’s fine and won’t prevent you from deploying your site, but it really is advised for the purposes stated above that you get Clean URLs working as soon as you can.

Installation Complete

If you have followed along correctly, then you will get the following screen.
Installation Complete
Don’t worry about the error being shown, as it is because if you are doing this on localhost using XAMPP, it just means we didn’t set up a mailserver, and it will not permit Drupal to send emails to administrators.
When you are on an actual server, these things should already be set up for you (unless you built your own web server and don’t have it configured).

Log Into Drupal’s Back-End

Let’s move to the back-end of Drupal. After navigating to your new website athttp://localhost/drupal, you will see the following page.
Log Into Drupal's Back-End
Log in by clicking on Administer.
Now that you have installed Drupal, let’s move on by talking about the concept of modules.

What Are Drupal Modules?

Modules are extensions of Drupal that enhance it with additional functionality.
For example, Drupal comes with a pre-installed module called "System". In fact, Drupal itself is a group of core modules (which are modules developed and maintained by the Drupal project). The System module is one of them, and Drupal can’t work without it.

How to Add Drupal Modules

Aside from the core modules that come with your Drupal installation, you can downloadadd-on modules from Drupal’s official repository. You can also make your own modules as you advance through your Drupal development skills using Drupal’s module API.
After finding a module you want to install, download it to your computer.
You will have to move the extracted module to the following location:
drupal\sites\all\modules
By default, there is no folder for modules, so you will have to create one manually; create a folder called modules inside drupal\sites\all.
It’s good practice to keep your downloaded modules separate from ones that come with the default Drupal distribution so don’t put add-on modules in drupal\modules.

Installing an Add-on Module: The CCK Module

The CCK (Content Construction Kit) add-on module is a popular Drupal module that allows you to add different types of custom content. Let’s practice adding modules to our Drupal sites by installing CCK, which we will use later on in this guide.
First, download the appropriate version of CCK and then place it insidedrupal\sites\all\modules.
After downloading and placing CCK inside drupal\sites\all\modules, you will need to enable it from Drupal’s administration interface. Go to Site Building> Modules and there you will see CCK. Enable it. You can enable different sub-modules of CCK if you need them (and we will do so later on in this guide when we start using CCK).
Congratulations! You have just installed a Drupal module.

Drupal’s Administer Page: A Crash Course

When you are in the Drupal Administer page, you will see two ways in which you can view it:
  1. By task
  2. By module
If you are in the By task view, you will see the page organized by administration tasks.
For example, in the By task view, under Content Management, you will see all the tasks associated in dealing with your content, such as Content which enables you to view, edit, and delete content as well as Post settings, which controls the behavior and display of your content.
Each task will have a short description below it to help you figure out what it is for.
If you are in the By module view, links are organized by modules.
For example, in the By module view, under the System module, you will see Configure permissions, Clean URLs, Modules, etc.

Learning Curve of the Back-end UI

The administration interface of Drupal takes a lot of time to get used to, but there are plenty of add-on modules that you can download and install to make the administration UI easier to work with.
I suggest installing the Administration menu module, which adds a navigation bar at the top of all your web pages when you are logged in as a site administrator.
Drupal's Administer Page: A Crash Course

Setting Up Your Home Page

It’s time for some action. Let’s build our home page. To do this, we will create our very first content. Our first post will be of a Page content type. To start, go to Content Management > Create Content > Page.
Setting Up Your Home Page

Menu settings

The default Drupal theme has a navigation menu in the top-right corner. The options under Menu settings will decide whether to include the home page link to that navigation or not.
If you would like to add a Home link to your primary navigation menu, select <Primary Links> under the Parent item dropdown menu.
The Weight option allows you to organize your links in sequence. A link with a lower weight will float to the top of the list.
So if your Home link is 0 and your About link is 5, for example, then your Home link will show up first because it is less heavy.
If your Home link has a Weight option of 0 and your About link also has a weight of 0, then Drupal will make a judgment of organizing your links in alphabetical order, such that since their weight is equal, About will show up first.
In our case, leave the Weight option for your Home link unchanged (its value by default is 0).
Setting Up Your Home Page

Input format

The options under Input format enable you to choose how you want to enter in your content.
Filtered HTML limits the amount of HTML you can use, filtering out dangerous HTML elements like <script>, which can be exploited for a client-side-based site attack.
Use Filtered HTML if you have site administrators that are not familiar with HTML.
For developers, use the Full HTML option. This input format option assumes that you are well aware of HTML.
Input format

Revision information

If the content of your Drupal website is being maintained by a single person, then this feature may not be useful (unless you’re very forgetful).
If you work with a team of different content creators and you want to save different versions, log changes to content, and make notes of revisions in your content — the Revision information optionst can be handy.
Also, with the Create new revision option checked, it will keep the older version in case you want to restore back to it later.
Revision information

Comments settings

These settings allow you to enable or disable the ability of people visiting your site to make comments on your content. We probably don’t want comments on our home page, so I’ve chosen the Disabled option.
Comments settings

Authoring information

You can change the name of author and time of publishing under the Authoring information options.
You don’t need to fill out these options all the time as Drupal will automatically fill it in if you don’t change the options.
Authoring information

Publishing options

This set of options dictates publishing settings of your content.
  • Published shows the status of the content. Uncheck it if you want to un-publish something.
  • Promoted to front page will display the page in the front page. Uncheck it if you don’t want the content to be published in your home page.
  • Sticky at top of lists will keep your content at the top of the front page and any content listings.
Authoring information

Check Out the Front Page

Here is our home page now; it is still simple, but don’t worry, we will be adding stuff next.
Check Out the Front Page

What We’ll Do Next

Now, we will create a job board for user-generated content.
While creating this part of our website, we will be working with custom content types, views and other Drupal features.

What is a Drupal Node?

Before we go any further, we should discuss one of the most befuddling topics for Drupal beginners — and that is the concept of nodes.
node is the elementary unit of Drupal’s content architecture. In simple words, if we pretend that a Drupal website is a house, the nodes are the bricks of that house. Each bit of content in Drupal is referred to as a node — whether it’s a comment, a page, a forum post, a story, and so forth.
Keep in mind that the Admin and User profile back-end pages are not referred to as nodes as they are created by the system and not by its users.
The node is a very important concept to familiarize yourself with if you want to build complex websites with Drupal. While the concept of nodes is confusing for Drupal beginners, it’s the core foundation that gives Drupal developers ultimate flexibility and customization options.
To give you an example, let us navigate to the home page content we created earlier. If you take a look at the address bar of your web browser, you will have something like this (note that you might not see this if you have Clean URLs enabled).
What is a Drupal Node?
You can see the word "node" in the URL, which is an indication that the page you are looking at is a node.

Creating a Custom Content Type with Drupal

Custom content types are a great way to customize your Drupal site. For each content type, you can control how it is displayed, the user permissions, give it custom attributes — the possibilities are excitingly endless.

Create a "Jobs" content type

For this example, we will create a job board in our website; a place where users can post job vacancies and projects, sort of like a mini-Craigslist.
We will have the following fields for each job posting:
  • Job Title
  • Job Description
  • Department — which will be a drop-down menu
  • Experience — A text field
  • Salary — A text field
Working with custom content types in Drupal is a piece of cake. First, navigate toAdminister > Content types > Add content type.
Most of the options in the Add content type interface have descriptions. The one I think is essential to talk about is the Type option. Type is the machine-readable name of your custom content type that is used in more advanced Drupal development.
For this example, the Type we will assign job posts will be job. This will be important in the future when you become a Drupal ninja master and want to create more complex customizations to your site, such as in the case where you want to create a custom page template for job postings, which you can do by creating a template file called node-job.tpl.php (this topic is out of the scope of this guide).
To move forward, fill out the TitleType, and Description fields.

Submission form settings

In this set of options, you will have the ability to create and set up a web form for accepting a job posting; this is what job posters will see when they want to submit information about a job.
Submission form settings

Workflow settings

Under the Workflow settings, you will find some basic publishing options for a Job posting that is submitted. If you want the job post to be published without first getting reviewed by a Drupal administrator, then check the Publish box.
Workflow settings
Continue to set up your workflow settings to move forward. For example, under theComments settings, you can change different settings for comments in the job posts. If you want site visitors to be able to comment on a job post, turn it off. If you don’t, disable comments.

Create the Jobs Content Type

Time to hit Save to create our first content type. If you followed all the instructions exactly, then you should see Jobs in your Content types list (along with default Drupal content types like Page, Story, etc.)
Create the Jobs content type

Customizing Content Types with the Content Construction Kit

So now we have our very own Drupal custom content type. What we will do next is to customize the Jobs submission web form with the help of a very helpful Drupal module: CCK.
CCK is usually the first module most seasoned Drupal developers install on a new Drupal site. Because this add-on module is so important, Drupal 7 will include it as a core module so that you don’t have to download it manually anymore.
You should have already installed CCK at this point because of our exploration of Drupal modules in the beginning of this guide.

Enable Some CCK Sub-Modules

First step in our customization process is to go to Administer > Site Building > Modules.
Under CCK, you will find a list of CCK sub-modules; some of them are already enabled (by default), and some of them aren’t. Why is this so? Drupal is extremely modular, giving you the choice to use only the things you need. Drupal module developers are encouraged to compartmentalize their feature set, which in turn results in less bulky and more resource-conscious add-on modules.
As a Drupal administrator, you should only enable the modules and sub-modules that you are actually using on your site.
For our job posting web form, let us enable the CCK sub-modules we need.
Here are all the sub-modules we need to enable for our Job post web form:
Enable Some CCK Sub-Modules
Since we need the user of the form to be able to enter float values (like years of experience needed by the job applicant to qualify for the job), then we will have to enable the Number sub-module.
We also need to enable the Option Widgets, which allows us to add different kinds of web form input fields like checkboxes, radio groups, and so forth.
Each of these sub-modules depends upon the parent module called Content — and you can’t enable a sub-module without first enabling Content.

Add the Form Fields

Finished enabling the CCK sub-modules? Great, now let’s start modifying our job post submission form.
Go to Administer > Content Management > Content Types, then in the Jobs content type, under Operations, and click manage fields — this is where we will add custom fields.
First, I am going to add the Department field, which will permit the job poster to select an option of job types (e.g. Development, Finance, User Interface, IT, Marketing) from a dropdown list.
After hitting the Save button, you will be forwarded to a page where you can write allowed values and where you can fine-tune the Department field.
The next field is the Experience field, which is going to allow the input of floating point values (e.g. 3.5 years of experience).
Under Help text, add instructions on how to fill out the Experience field so that the job poster can get a better understanding of how to input the values correctly.
Under Global settings, you can specify valid input values. For example, under the Minimum option, if you specify 2.3, then a job poster typing 1.4 will see an error.
Our last field for our Jobs content type is the Salary field. It can take in an Integer value such as 5000 USD.
Under Global settings, specify 0 as the Minimum because you don’t want people entering negative integers like -1200. (Why not specify something greater than 0? Because entering 0 for the salary might mean that it’s an unpaid job).
After creating all the fields, you should have something like the following image in your Fields view for the Jobs content type.
Click and drag on the cross-arrows icon on the left side of each field to reorganize their order.

Create Job Postings

Before moving forward, create some sample job postings by going to Create Content > Jobs. Create a few sample job postings because we will need this data for the next section of this guide.

CCK is Really Powerful

While we have worked with some basic field types here, CCK also allows you very robust ways of taking in content. For example, you can use the ImageField add-on module to allow people to post an image (maybe you want the job poster to have the ability to show pictures of the office space where the job is located).
Check out this list of available CCK fields if you need custom input fields.

Using the Views Module to Populate the Job Posting Page

Though you can use queries to call out content from your database, that’s a really a complex process even with Drupal’s powerful API.
To help populate the data of a Job post page, we will use Views, which is a module that allows you to call content from your database without writing a single bit of code.
In simple words, it is a user interface for MySQL queries. Views is a very powerful module and sometimes it can be a bit difficult to understand for new users. The best way to learn about Views is to play with it; and that’s what we will do next.

Install the Views Module

Before we begin, we need to install Views. After downloading, installing and enabling Views, you can access it under Site Building.

Creating the First View

Any listing of data provided by Views is referred as a view.
We will create a view that will show all the available job postings on one page. You can also create attachments, blocks and customizable RSS feeds with Views, but we will keep it simple.
Go to Site Building > Views > Add and type out the fields as shown in following image.
Drupal will show you the actual user interface that is used to create views. Don’t feel overwhelmed, we will talk about the user interface shortly.

What is a Display?

To start customizing our Jobs view, we have to understand what a display is. Displays present our data in different styles. A view can have multiple displays.
In our Jobs view, we will create 2 displays: a page and a block. We will revisit this topic shortly.

Add Fields to the View

Let us add some fields to our view. Fields are the content that we want to show on our page. Click on the plus (+) icon under Fields to add fields to your view.
We will show the Job Title, Job Posting Date, Department, Salary and Experience that is supplied through our Job CCK web form.
We will have to select the following fields from the additional box opened at the end of page when we clicked on the plus (+) icon. These are the fields we are interested in:
  • Node: Title
  • Node: Post Date
  • Content: Department (field_department)
  • Content: Salary (field_salary)
  • Content: Experience (field_experience)
After checking the appropriate boxes, make sure that you hit the Add button so that you can configure each field separately.
After hitting the Add button, the first option will be to customize Content: Department (field_department). Leave everything as it is except just change the Format option to Plain Text (from Default), and then click Update.
After hitting Update, the next field you will customize is Content: Experience (field_experience). Don’t change the default values; just hit Update. Do the same thing for the Salary field.
After finalizing your custom fields, the next option is to change the field Node: Post Date. You just have to change the Date Format to Time ago so it shows the number of days the job post has been up (e.g. "12 days ago").
The next and final field to customize is Node: Title. We just have to check the box that it should be linked to.

Live Preview Tab

You can use the Live preview tab to see how your view looks like as you make customizations to it.

Basic Settings

Now we will set up our basic settings.
Let us choose Unformatted for Style, and display the data in a Table format. Once that’s done, click Update.
We want to display all the job postings in one page, instead of being split up in multiple pages, so we will select No for Use pager. Again, click Update once you’re done.
After all these customizations, you can see that our Live Preview tab looks nicer than the initial view, but we are not done yet.

View Filters

At this point, our view is displaying all of our content, even ones that aren’t job postings. We only want to show jobs on our Jobs page.
We will select two filters so that we only show only published job nodes:
  • Node: Published
  • Node: Type
Click on that plus (+) icon beside Filters, select the Node: Published and Node: Typeoptions, and then click Add.
Then configure the Node: Published filter so that the criteria is such that Published is set to Yes, which will omit all jobs that are not yet published from our Jobs view.
Configure the Node: Type filter so that only nodes that is a Jobs content type is shown.
Use the Live Preview tab to check your filters.

Sorting Criteria

If we look at the Live Preview, you will notice that nodes are sorted from oldest to newest. It would be nice to show the latest jobs first.
In order to sort jobs such that the newest jobs are displayed at the top, we will apply a sorting criteria. Under Add sort criteria, select Node: Post Date from the box, which will then open when you click the Add button.
Under Sort order, choose Descending.
Check the Live Preview tab again; it will now show you the latest jobs first.

Rearrange the Fields

There’s one other thing we can do to improve our view: rearranging the order of the fields. It makes sense that the Title should be first, and the post date second, and so forth. You can do so by clicking the up/down button on fields tab.
Check out the Live Preview tab; our view is looking nice.
We are done creating our view. Next, we just have to create 2 displays for our view.

Creating a Page Display

On the left of your Views page, select Page and then click Add display. After clicking it, you will be automatically directed to the Page settings page.
We just have to add a path to our page and a place to show the link to our display. I have put the value of 2 for Weight so that it appears after the Home navigation link.
After filling the values, don’t forget to click on Save the Display.
Now, you can see the link (called Available Positions) to our page display in the main navigation.

Creating a Block Display

Blocks are used to show information in various regions of a Drupal website. They are widgets that can display things like current events, the top 5 most popular posts, and so on in regions like the left sidebar, the header, the footer, and more.
You can place blocks in the header, footer and left and right sidebars in Drupal’s default theme. You can manage your blocks by going to Administer > Site Building > Blocks.
Now we are going to create our second display for the Jobs view so that we can show the latest job postings in the right sidebar.
Go to Administer > Site Building > Views and choose edit Jobs view. On the left, select Block and click Add display as you did before.

Click Override

We will remove 3 fields in our block display so that the block fits in the sidebar and so that it isn’t so overwhelming with information. Click on each field under the Fields tab. Before removing a field, make sure that you click the Override button, otherwise it will change the default view and will also affect the page display we constructed earlier.
You can also change the name of the block, which will be shown in Administer pages.

Add the Block to the Sidebar

Now let’s move to Blocks and add our generated block display to right sidebar.
Go to Administer > Site building and click on Blocks.
Go to the Disabled section, find the block display we just created, and select right sidebar under Region.
Make sure that you hit Save to perform the change.
Awesome, and with that — we’re done with our job board!

Drupal Themes

The final subject we will discuss in this guide are themes. Themes are used to change the visual appearance of a Drupal website.
There are many themes available on the Web. Here is the Themes list on Drupal’s official site.
To install a theme, you have to download it and then copy it in yourdrupal/sites/all/themes directory. If there isn’t a themes directory, then you can create one and then place your theme files inside it.
You can activate or deactivate themes by going to Administer > Site Building > Themes.
There are 5 themes that comes bundled with the Drupal core installation. I have just activated the Marvin theme to give my test site a clean, new look.
Drupal Themes
Make sure that you choose the theme default so that it can be applied to your Drupal site.

Wrapping Up

Drupal is big. I have done my best to cover the most confusing and difficult subjects that beginners often struggle with; however, this guide merely scratches the surfaceof the true power of Drupal. I encourage you to explore the Drupal site for more advanced topics.
If you have questions, feel free to ask via the comments section and I will be more than happy to help you!

How to Evaluate What CMS to Use


Content Management Systems (CMS) have evolved into more than just publishing content, but managing your workflow as well. CMS’s nowadays allow you to easily conceive, edit, index, and publish content, while giving designers and developers more flexibility in customizing their look and functionality. Although there are many that require advanced skills to operate successfully, this article is going to cover a select few that offer a balance between design, code, and end-user usability.
How to Evaluate What CMS to Use
This article will help you make an informed decision on what CMS is right for you.

Evaluating Content Management Systems

Evaluating content management systems can be an overwhelming task, not because it’s rocket science, but simply because there are tons of them to choose from. However, with a structured approach to your evaluation, things can be much easier and less intimidating. Let’s talk about the things you should look at when deciding what CMS to use; here are eight characteristics that a good CMS should have.

1. Intuitiveness: easy to understand and use

Your CMS should have a GUI (Graphical User Interface) that’s easy on the eyes, doesn’t have overly complicated options, and offers simplicity in its administration interface. A good interface means that tasks pertaining to creating and managing your content will be quicker, saving you a lot of time and increasing your productivity.
You should also look at it from an end user’s perspective: if you’re building a content management system for a client who’s not "technology-savvy" and you choose a solution that requires a Ph. D. in computer science, it’s less likely that they’ll be able to use the system (thus, defeating the whole purpose of a CMS, which is to empower its users).

2. Flexibility and Ease of Customization

Flexibility and Ease of Customization
When taking into consideration a content management system, make sure that you’re not obligated to use their design templates. A large quantity of CMS solutions allows you to customize your own design without major restrictions. If your CMS forces you to choose a fixed and unalterable design template, then you’re stripped of creative license and your website will look like everyone else’s.
CMS’s that offer customizations on templates are Expression Engine, WordPress, and Joomla just to name a few; these content management systems boast and promote their ability to be easily modified.

3. Extensibility via Plugins and Modules

Extensibility via Plugins and Modules
A good CMS will allow you incorporate helpful site features into your site by letting you extend the default configuration with plugins.
Plugins/extensions/modules (their terminology varies between different platforms) make a difference in terms of enhancing your site’s ability to provide your site users with useful options for interfacing with your site.
Look for a CMS with a powerful Application Programming Interface (API) in case you need to write your own extensions. Make sure that the CMS you’re considering already has a huge list of plugins. Though you might not need plugins right away, it’s important that this is available to you, later down the road.

4. No Need for Programming Knowledge

If you’re more "design-oriented" than anything else, make sure you select a CMS where you won’t need to have extensive programming abilities to publish and maintain your site.
There is a wide selection of CMS’s that have WYSIWYG editors, letting you edit content without the need for code. Having to edit text through HTML markup can be time consuming and takes you away from other aspects of your managing and building your site.
Complex sites, however, can require a CMS that will let you type in some code, edit files with extensions such as .php, .css, .html, and make changes without that need for a third-party source code editor.

5. Optimized for Performance and Speed

Taking into consideration the speed your pages load on the browser, and how fast your site can make a connection to a server, is vital. Choosing a CMS that is bulky will drive away visitors rather then bring them in. By visiting examples of live sites, you’ll be able to gauge somewhat how fast pages load.
Keep in mind that you can increase the load time of your site by choosing a good host, and adding plugins that cache/compress/minify feeds, CSS, JS and also caches your database objects. A case study on this subject can be found here.
A simple and free tool that you can use to evaluate page response times of your CMS candidates is YSlow. Install it and head on over to demo sites of your CMS’s to see how well it’s front-end performs.

6. Security

Security
Adequate security for your site is very important and must be in place in order to protect your content. There are CMS’s that allow you to install specific plugins and edit files/permissions in order to increase security levels. Make sure you choose a management system that offers modules to protect the integrity of your site. You can also protect your site by selecting a CMS that allows you to easily assign a different username and password to each user. This will let you view and control what each user has access to.
7. Documentation and Community Support
Nothing’s more frustrating than trying to figure out how to do something, and not have references online that you can take advantage of. One way to ensure that you won’t be running into this problem is by reading through the documentation of your candidate CMS’s. Also, a quick Google search will tell you how popular and well-documented a content management system is.
The availability (or lack thereof) of support from users of the system can be a deal maker or deal breaker. When users are active and proud of being part of the community, you not only have access to individuals that are more familiar with the system, but also, you can be assured that the project will be developed continually. Nothing’s worse than investing your resources and effort on a dead (or soon to be dead) project.

8. Emphasis on Web Standards and Best Practices

Content Management Systems developed under web standards guidelines and best practices will ensure that you won’t get burned later down the road. When applications are designed with best practices in mind, you can be assured ultimate cross-browser compatibility, lean-and-mean code, and ease of maintenance.
Look for content management systems that promote the use of web standards, and those that put it at the forefront of their development and design philosophy.

Some Key Content Management Systems to Consider

Now that you know the key characteristics of a good content management system, let’s take a look at a handful of major CMS’s that excel in most, if not all, of those areas.

ExpressionEngine

ExpressionEngine
ExpressionEngine (EE) is a flexible CMS for any scope of project. Within a few minutes, you’ll understand how to easily begin creating content. EE’s templating system lets you quickly see instant changes live. EE also has a multi-layered caching system to try and minimize the database usage. In addition, EE lets you embed and run PHP directly within its templates, very similar to WordPress.
ExpressionEngine has various features such as allowing you to have multiple sites with just one installation of their software. Just as we spoke in the above section dealing with connections and load times, EE has a unique template caching, query caching and tag caching keep the site running at a pretty quick pace by storing database queries in memory to reduce database connections when generating web pages.

WordPress

WordPress
WordPress is one of the most popular publishing platforms currently available in the market, and it’s known for being an excellent blogging platform. WordPress is free and open source, and it can be downloaded and installed as many times as you want.
WordPress installations are very quick and easy. It only takes a few minutes for your admin panel to be operational. If coding is not your strong suit, then no worries, WordPress offers its users a WYSIWYG editor (called Visual Editor).

Business Catalyst/Goodbary

Business Catalyst/Goodbary
Business Catalyst/Goodbary (owned by Adobe) is a powerful ecommerce CMS for developers. This content publishing platform has an array of useful features such as email marketing and in-depth site analytics. Business Catalyst gives you an easy way for your business to gain an online presence in no time. GB allows you to easily keep track of a customer’s actions, build and manage a customer database of any size, and sell your products and services online. Business Catalyst integrates well with a lot of popular payment systems such as PayPal, Google Checkout and pre-integrated gateways.

Joomla!

Joomla!
Joomla! is an advanced CMS with excellent function and content management. The installation process is pretty quick and easy. Joomla! is a complete CMS allowing you to build simple to advanced sites. Joomla also has super support for access control protocols like LDAP and OpenID, and can interface with popular and open API’s such asGoogle APIs.
With Joomla!, you’ll have more then 3,500 extensions at your disposal along with the support of an entire community. With a simple extension, you can add almost any needed functionality to your site.
One downside to Joomla! is that their heavy-artillery list of extensions often require you to purchase them. Hopefully, in the future, they will make their plugins free in order to aid users on a tight budget.

Drupal

Drupal
Drupal, a great open source CMS supported by a very active community, lets users publish content through any time with very little restrictions. Once the installation is finalized, you will discover features such as forums, user blogs, OpenID sign-ons, profiles and more. This CMS was written in PHP/MySQL for ease of customization and has one of the highest-regarded API’s in the open source content management system field.

Cushy CMS

Cushy CMS
Cushy CMS is a hosted and free content management system that’s lightweight, though powerful enough to jumpstart your site in a jiffy. With Cushy CMS, you have to add CSS styles to the sections that you will eventually change or edit. This CMS allows you to access and store content while it uploads this same data to server.
Cushy was built for content editors and designers and so it’s very simple and easy to manage. Being a SaaS, you don’t need to install or self-maintain the CMS.

TYPOlight

TYPOlight
TYPOlight is great for site builders that will be maintaining multiple sites and is an ideal solution for web developers. If you’re thinking about creating a simple or advanced site design with great functionality, then TYPOlight CMS can definitely get the job done for you.

RadiantCMS

RadiantCMS
RadiantCMS is a Ruby on Rails app. Radiant has a very active community for core support and updates. If you are a RoR developer, it’s right up your alley. Radiant has concentrated on making things much more user-friendly for end users and web designers. RadiantCMS also contains an innovative custom tagging language (called Radius) that’s easy to pick up.

SilverStripe

SilverStripe
SilverStripe is an open source application written on top of PHP and was designed with emphasis on flexibility. SilverStripe has many configurable options and is geared towards content-heavy websites.
This CMS was completely built on its own PHP framework, called Saphire. SS offers content version control and great SEO support. All users alike are welcome to customize the administration area for their clients or themselves.
The only downside with SS is that the default templates are garbage; however, that’s nothing a little elbow grease wouldn’t fix.

Textpattern CMS

Textpattern CMS
Textpattern CMS is a very popular system for many designers due to its simplicity.
Textpattern strives to provide great content management that produces quick, easy, and desirable web standards-compliant pages. There is no WYSIWYG editor because Textpattern utilizes textile markup for content generation.
The backend is very easy to use and follow. New users will learn the administration section with super speedy ease.

Alfresco

Alfresco
Alfresco is a JSP enterprise content management solution that’s quick and easy to install. Alfresco lets you drop files into folders and convert those files into interactive web documents. This CMS isn’t as easy to become familiar with when compared to others, however, with a little bit of time investment, you’ll definitely get the hang of it. Alfresco could be targeted more towards the intermediate developer, although its pure functionality allows it to become very usable. The administration GUI is very organized, well maintained, and easy to navigate through.
Got tips on how to evaluate the right CMS? Do you have experiences (good or bad) with the content management systems shown here? Talk to us about it in the comments.

Designing Hyperlinks: Tips and Best Practices


Designing Hyperlinks: Tips and Best Practices
A hyperlink (aka link) is the most basic interface on websites. In fact, we can trace hyperlinks back to the origins of the web, with Tim Berners-Lee’s ENQUIRE, where each new page had to link to another. 
This article is a discussion on designing hyperlinks, offering a few tips and best practices for designing them. We will conclude with a small showcase of exceptional hyperlink designs on live sites.

Why Is Hyperlink Design So Important?

Links are the most basic interactive component between a user and a web page: A user clicks on a link, and in turn, they are presented with another web page. They’re so important, yet easily get lost in the midst of newer and shinier UI elements like web forms, animated tooltips, and call-to-action buttons (which are essentially links styled to look like something else). Links are so ubiquitous that we often overlook them in our designs.

Basic Principles of Designing Hyperlinks

Before we go any further, it might be wise to cover basic things you should know about hyperlinks.

Hyperlink States

When conceptualizing link designs, it’s important to consider and know the link states you have to work with. There are 5 states that <a> elements can have:
  • a:link – this is the normal state of a hyperlink
  • a:visited – this is when the link has been visited before
  • a:hover – this is when the user hovers their mouse over a link
  • a:active – this is when the user clicks on the link (or presses the Enter key on a focused link)
  • a:focus – this is when the user uses the Tab key to navigate to hyperlinks
The technical term for these states is pseudo-classes. It’s important to note that web browsers treat these states differently by default. For example, in Firefox, :activeand :focus are displayed with a dashed gray border around them, controlled with theoutline property. Whereas, in Google Chrome (and other WebKit browsers), :activelinks will have no style and :focus links will have a yellow border around them by default.
Here are examples of each link state (shown in Google Chrome 6.0):
Links in Google Chrome
It’s best to have a style for each state so that the user is aware of the status of each hyperlink on a web page. For example, hovering over a link and having it look a different way (e.g. changing its color) improves the perception that it can be clicked.

Popular CSS Properties for Styling Hyperlinks

There are many link style properties you can take advantage of for designing hyperlinks. Some popular CSS properties pertaining to the visual appearance of links include:
  • color – The color of the hyperlink
  • text-decoration – Setting this to none removes the default underline
  • background-color – If used in the :hover state, can make the link’s background color change
  • outline – Setting this to none using the a:focused selector removes the default gray border around active and focused links in Mozilla and the yellow or blue border in WebKit (Chrome and Safari); this is not advised because the border helps with web accessibility
  • font-weight – Another distinguishing method for hyperlinks is setting them to bold
  • border – If you need more control outside of text-decoration: underline, try giving your hyperlinks a bottom border (experiment with thickness, color and style)
There are plenty more of CSS properties you can tweak, but the above seems to be the most common.
Below, you can see different styles of hyperlinks on Flickr. The text "Your Photostream" changes background-color when you hover over it. The main menu links are styled as bolded and without underlines. The "Recent Activity" link looks the most like the standard blue, underlined hyperlink.

Hyperlink Design Best Practices

Here are a handful of suggestions and commonly held best practices when dealing with the style and design of hyperlinks.

Keeping Link Styles Simple Isn’t a Bad Thing

I think we can all still relate to seeing the standard blue, underlined hyperlink. It’s the default style of hyperlinks and they work well.
Good hyperlinks should be distinctive from other types of text in a web page. According to several findings by usability researcher Dr. Nielsen, hyperlinks are most effective when they are a different color from other types of text in a web page and when they are underlined to denote that the text is clickable. Nielsen also suggests that the color of unvisited links should be "vivid, bright, and saturated." It goes without saying that the converse of these ideas are also true. It’s best to avoid underlining text for things other than links, and not using normal text that is the same color as your links.

Style Link States Differently

Earlier on, we talked about the 5 different link states. To avoid confusing your users and to speed up visual recognition of hyperlinks on a web page, it’s best to provide different styles for each link state.

Don’t Remove Outlines on Active and Focused Links

By default, most browsers will style hyperlinks when they are clicked or focused on. For example, in Firefox 3.6, the default style for a:active is coloring the link red and surrounding it with a red dashed outline. The default style for a:focus, which you can see for yourself by using your Tab key, is a blue dashed outline.
Don't Remove Outlines on Active and Focused Links
Both of these visual elements are used to aid in accessibility. People who cannot use a mouse need to tab to hyperlinks in order to activate them (using the Enter/Return key). Imagine having to tab through 100 links in a web page. Would it not be difficult to see which link you are on if there was no visual cue for them?
The same is true for active links; a different style gives users the visual feedback that they were able to successfully click on the link.

Keep Hyperlinks Consistent

Many principles of usability and psychology support the notion that things that are similar in function should look the same. For example, Gestalt psychology — which applies to human perceptions of design — suggests the concept of similarity; that is, "[w]e group things perceptually if they appear similar to one another."
To avoid the situation where users having to think whether a particular text is a link or not, it is a good idea to keep hyperlinks and regular text styled consistently.

Reserve Common Hyperlink Styles for Hyperlinks

The accepted and most recognizable convention for hyperlinks is that it is blue and underlined. Therefore, to avoid confusion, you should avoid coloring your normal text as blue and underlined.

Showcase of Hyperlink Designs

Here are a few great hyperlink designs to take a look at. I hope that these can inspire you to rethink the significance and possibilities of your own hyperlink designs.

Web Designer Wall

Web Designer Wall
Web Designer Wall is a popular design blog created by Nick La. The site’s hover effects for links on the site’s sidebar feature a pencil-style circle around the text. It’s unique and adds an additional level of intricacy to the entire site design. La even offers a tutorial on how you can recreate a similar effect. You can also notice some creative hover effects on links in the navigation and blog posts.

Carsonified

Carsonified
Carsonified connects web designers and developers together through conferences held year-round all around the world. Their website is an excellent display of consistency and similarity principles applied to links. You can move your mouse all throughout the page and see their unique hyperlink effects displayed in a similar fashion as their site logo. The most prominent area would be the top navigation menu that boasts an icon set for each link.

Far Coast

Far Coast
Far Coast has their entire website designed in Flash. After the initial page load, you’ll notice all of their links perform a fade-in effect when moused over. This visual reaction to mouse hovers gives users the idea that link elements are interactive, which is in line with the best practice of styling different link states to provide the perception of clickability.

WordPress.org

WordPress.org
You can see consistency of hyperlinks applied everywhere throughout the official WordPress site. Their main menu links look great and use CSS3 text-shadow to give them that extra touch of detail. The main menu links also have descriptive titleattributes to help users learn more about a particular link when they hover their mouse over them.

Retinart

Retinart
Retinart is a freeform blog containing creative thoughts on graphic design and digital art. The design boasts an interesting hyperlink hover effect that reflects the background and text color over each other — a classic technique that works really well on this particular blog design especially because of the limited color scheme. This helps achieve an even stronger visual grouping of links as well.

Unmatchedstyle

Unmatchedstyle
This web design gallery is just one of many that you can find all over the web. The site’s simple design and impressive layout allows for easy browsing through their collection. An element of interest would be the navigation links toward the top of the page that display a creative underlined effect on mouseover.

made my day

made my day
This is the personal blog of web designer Marc Hinse. His page boasts a number of interesting hyperlink effects, all of which seem perfectly placed. Check them out and notice how the hyperlink states fit into the blog’s overall design theme.

Build Conference

Build Conference
The Build Conference is held for designers and developers and is hosted in Ireland. Their site has a unique effect added to their main navigation links that fades in on mouseover using CSS3 transition properties.

LogoPond

LogoPond
The gleaming fountain of all logo and branding inspiration, LogoPond has some great link styles. The most notable are in the footer area where you can discover links to popular pages throughout the site. On hover, you get a flipped background and text effect similar to the Retinart blog.

Suikerdraakje

Suikerdraakje
Suikerdraakje is an e-commerce store selling baby supplies and toys. Their design is remarkable and features many illustrations to fill out whitespaces in the layout. Their main navigation links display a rounded corner background shift on mouse over — one of the few sites to display this effect.

Nintendo

Nintendo
Nintendo has always been at the forefront of innovation, and you can see this on their corporate site. In the context of hyperlinks, their main navigation links fade into a light blue glow underneath when you mouse over them, reminiscent of the blue LEDs on the Wii.

Stephen Caver Blog

Stephen Caver Blog
Stephen Caver’s blog theme is very impressive and makes good use of hyperlink design and best practices. When you move your cursor over his blog posts, you’ll notice the links in each area will light up. This technique is simple to implement with a small bit of JavaScript and adds the interactivity your users may appreciate.

MapBox

MapBox
MapBox is a newer web application that boasts a handsome "Web 2.0" design. You can see some very neat effects all throughout the site, most notably their heading links that hold a nice hover effect.

Dribbble

Dribbble
With Dribbble being a site targeted towards designers, it would only make sense that their site design should be remarkable. Their hyperlinks display so many unique and customized effects all around the design layout that it’s hard to pinpoint one area to concentrate on.

G4TV

G4TV
G4TV is the cutting edge of video game and technology news. The site has a diverse design containing many unique hyperlink design states. Check out their main navigation and sidebar content specifically.