A Drupal Dropdown List of Countries, States, Cities

We had a question from a member this week. He was collecting information from users and wanted to collect addresses:

"I need to have a user select a state in a list. My next requirement is to populate a new list with all the counties for the selected state."

It's easy to imagine many more people wanting to do something similar, so in this tutorial we'll explain how it's done.

This tutorial could be used to show Continents and then Countries, Countries and the States, States and then Cities or any similar combination you need. We're going to use the Conditional Fields module.

Installation

Install the Conditional Fields module: https://drupal.org/project/conditional_fields
Yes, it is marked as a dev version for Drupal 7, but it worked for us without any problems.

Add the fields

Add your data fields as you would normally.
In this example, our first field would be a list of the US states. We're going to add these as a List (text) field.

We enter a list of all 50 states into the field:

Now we repeat the process for the counties in each state. Start alphabetically with Alabama Counties:

And enter all a list of all the counties.

You will need to repeat this 49 more times, creating a field for each state.

Managing Dependencies

The Conditional Fields module adds a new tab called "Manage Dependencies" to the top of the fields area. Click that tab.

The Manage Dependencies tab is organized into Dependents and Dependees.
In this example, the Dependents are the counties and the Dependees are the States. Our first setup will be this:

• Dependent: Alabama Counties
• Dependees: US States

Click Add dependency.

The key setting for the field is "Insert Value from Widget". Make sure you choose the State that will trigger the list of counties. In this example, we choose Alabama.

You will need to repeat this 49 more times, creating a dependency for each state.

Test the dependencies

Go to create a new item for your content type and see whether the dependencies are working.
In our example, only the states field will show:

However, if we select the Alabama option, then the Alabama Counties field will appear.

Track Hits and Show the Most Popular Drupal Content

Nearly every news and magazine site shows a list of the most popular content.

Drupal can track the popularity of content using only the core features.

Here's how to track the hits on your Drupal content and how to show those statistics.

Step 1. Enabling Statistics

• Go the the Modules screen and enable the Statistics module.

• Go to Configuration > Statistics.
• Check the box for Enable access log.
• Check the box for Count content views.

Step 2. Viewing the Statistics

Go to Reports > Recent hits and you'll be able to see a record of which pages have been visited. If the user is logged in, you can also track their username.

Step 3. Using the Statistics

Once the statistics module has been turned on, it wil then be available in Views.
For example, you can use statistics in the Sort criteria for views. This would allow you to show the most popular content.

You can also add statistics as a field, so you can see the number of hits on each article. This would be useful for display on some sites but also for internal reports created with Views.

How to Uninstall a Drupal 7 Module

This tutorial will show you how to uninstall a module from your Drupal 7 site.

In this example, we're going to show you how to uninstall the Devel module. Devel is very useful for developing a site, but should be uninstalled before going live.

Step #1. Uninstalling the module

Go to the Modules screen and click Uninstall in the top-right corner.

Here you'll see a list of modules that can be uninstalled:

At the moment, Devel is not in this list. If you don't see the module you want to remove in this list, go back the Modules page and disable the module.
Sometimes, if the module consists of multiple parts, you may need to disable several parts. In this case, you'll need to disable Devel generate and then Devel generate:

Now I click Uninstall again and Devel is available to uninstall.

Check the box for the module you want to uninstall. As with disabling the module, you may need to uninstall one before you uninistall the others.

Click Uninstall.
Click Uninstall again to confirm you really want to delete it.

Step #2. Deleting the files

The process in Step 1 uninstalls the modules, but doesn't delete the files.
To fully remove a module, you will need login to your site's files and browse to /sites/all/modules/ to delete the files:

Add Captions to Drupal Images with jCaption

jCaption is a simple but very useful little module.

jCaption allows you to add captions to your Drupal images, no matter what editor you're using.

Using a small jQuery script you'll be able to add the captions and then use CSS classes to improve the design of those captions.

How to use jCaption

• Install and enable the jCaption module:https://drupal.org/project/jcaption
• Inside your content, make sure your image has either an ALT or a TITLE tag. This will be the caption for the image.

• The image below shows how the caption will appear on your image, using the default Bartik theme. It's really as simple as that:

Go to Configuration > jCaption and you'll be able to tweak the jCaption options:

At the bottom of the configuration screen, you can add CSS classes to the captions:

How to Build a WordPress Blog in Drupal

There's a phrase commonly used by Drupal fans:

"If you want to build a blog, use WordPress. If you want to bulld WordPress, use Drupal."

We actually had a very simular question from one of our members. They wanted to know how to make Drupal look like WordPress.

In this tutorial, we're going to show you how to replicate the basic WordPress blog features in Drupal.

WordPress blog widgets

In this tutorial, we're going to use WordPress 3.5 because it's easier to see the widgets than with the new theme in WordPress 3.6.
The image above shows the following blocks on the right side.

• Recent Posts
• Recent Comments
• Archives
• Categories
• Meta

We're going to show you how to create those 5 blocks in Drupal.

#1. Recent posts

Out of the box, Drupal ships with a block called Recent content (the first block you see in the screen shot above). Personally, I'm not real excited about how the block looks but it's there, ready to use.
To make a block that look like the one in our example, we'll need a module called Views so we can create it. Below are the steps.
Download and Install Modules

• Download and install Views from https://drupal.org/project/views
• Download and install Chaos Tools from https://drupal.org/project/ctools

Enable Views

• Click on Modules in the black admin menu bar.
• Scroll to the bottom and check the box for Views and Views UI.
• Click Save Configuration.
• Click Continue to allow Drupal to enable Chaos Tools.

Build the Recent Posts Block

• Click Structure, then Views.
• Click Add new view.
• Name your view (whatever you want but Recent Posts sounds good).
• Uncheck Create a page.
• Check Create a block.
• Select HTML list from the Display format (so we can have a bulleted list)
• Click Save & exit.

Enable the New Block

• Click on Structure, then Blocks
• Locate the block called View: Recent Posts
• From the dropdown in the region column, select the second or right sidebar (region labels will vary from theme to theme).
• Click Save blocks
• Close the admin overlay by clicking the X in the top right corner of the overlay

 

#2. Recent Comments

The WordPress Recent Comments block shows the author of the comment and the title of the post upon which the comment was made. Drupal's default Recent Comment blocks shows the subject line of the comment (not the post upon which it posted) and how long ago. To mimic the Wordpress block, we need Views.
Views Default Recent Comments View
Views ships with a view called Recent comments but it mimics the default block that ships with Drupal. You could enable the block and edit it (using the instructions below or simply create it from scratch via the instructions below).
Build the Recent Comments Block

• Click Structure, then Views
• Click Add new view
• Name your view (whatever you want but Recent Comments sounds good)
• Select Comments from the Show dropdown
• Uncheck Create a page
• Check Create a block
• Select HTML list from the Display format (so we can have a bulleted list)
• Change Comments to fields in the next dropdown
• Click Continue and edit
• Click Add next to Fields
• In the search field, type author
• Select Comment: Author
• Click Apply
• Uncheck Create a label
• Click Apply
• Click Add next to Fields
• In the search field, type Title
• Select Content: Title
• Click Apply
• Uncheck Create a label
• Click Apply
• Click the arrow next to Add, then click rearrange.
• Click on the first Content: Title field
• Click Remove
• Under Format, locate Show. Click Settings next to Fields
• Check the boxes for Comment: Author and (Content) Content: Title
• In the separator field, type on (include a space before and after 'on')
• Scroll down to see a preview
• Scroll up and click Save in the top right corner

Enable the New Block

• Click on Structure, then Blocks
• Locate the block called View: Recent Comments
• From the dropdown in the region column, select the second or right sidebar (region labels will vary from theme to theme).
• Click Save blocks
• Close the admin overlay by clicking the X in the top right corner of the overlay

#3. Archives

Drupal does not ship with a default block called Archives. You need Views. However, we are in luck. Views ships with a default Archive view.
Enable and Edit the View

• Click Structure, then Views
• Click Enable for the View called Archive
• Click Edit to the right of the newly enabled view
• Click Monthly archive next to Title
• Rename to Archives.
• Save the View

Enable the New Block

1. Click on Structure, then Blocks
2. Locate the block called View: Archives
3. From the dropdown in the region column, select the second or right sidebar (region labels will vary from theme to theme).
4. Click Save blocks
5. Close the admin overlay by clicking the X in the top right corner of the overlay.

#4. Categories

After installation, every Drupal site has one taxomony. The taxonomy can have multiple vocabularies. Each vocabulary has multiple terms. Terms are used to categorize content in Drupal.
Therefore, the block we will create will list terms from the Tags vocabulary (which ships with Drupal).
Build the Recent Posts Block

1. Click Structure, then Views
2. Click Add new view
3. Name your view (whatever you want but Categories sounds good)
4. Select Taxomony terms from the Show dropdown
5. Uncheck Create a page
6. Check Create a block
7. Select HTML list from the Display format (so we can have a bulleted list)
8. Click Save & exit

Enable the New Block

1. Click on Structure, then Blocks
2. Locate the block called View: Categories
3. From the dropdown in the region column, select the second or right sidebar (region labels will vary from theme to theme)
4. Click Save blocks
5. Close the admin overlay by clicking the X in the top right corner of the overlay.

 

#5. Meta

The WordPress block called Meta appears to be a menu block, versus a list of dynamically generated links - as we have seen so far. In order to create a menu in Drupal, perform the following steps. Please note that the scope of this blog does not include creating pages called Entries RSS and Comments RSS.
Create the Menu

• Click on Structure, then Menus
• Click on Add Menu
• Name it Meta

Add Menu items

• Click Add link
• Enter Login for the menu title and user for the path
• Save
• Click Add link again
• Enter Site RSS for the menu title and rss.xml for the path
• Save

Enable the New Block

• Click on Structure, then Blocks
• Locate the block called Meta
• From the dropdown in the region column, select the second or right sidebar (region labels will vary from theme to theme)
• Click Save blocks
• Click_hold_drag the Meta block to the bottom of the list of blocks shown in the second sidebar
• Save
• Close the admin overlay by clicking the X in the top right corner of the overlay

Drupal 7.24 and 6.29: tmp directory and .htaccess

One of the fixes is described as "Code execution prevention". The Drupal security team wanted to add an extra layer of protection to stop hackers from uploading malicious files.

This fix requires some people to make a manual change to their site and this tutorial will show you how.

If you go to Reports > Status Reports, you may see an error like the one below. This will only appear for people using an Apache server and with certain configurations.

The error will read like this:

"Temporary files directory     Not fully protected
See http://drupal.org/SA-CORE-2013-003 for information about the recommended .htaccess file which should be added to the /Applications/MAMP/tmp/php directory to help protect against arbitrary code execution."

The actual directory suggested will be different, depending on where your site is hosted.
The directory that gives the warning is the Temporary directory. You can find this in Configuration > File System:

This directory is not always easy to find, because of this restriction for the temporary directory.
"A local file system path where temporary files will be stored. This directory should not be accessible over the web."
What this means is that you may not find the /tmp directory amongst your normal Drupal files:

The /tmp directory may be at a higher level than your Drupal files. It may lie at least one level higher up, and outside of your normal web directory. In the image below, the web directory is /public_html.

Please note that if you do find the /tmp directory in a location like this, you do not have to proceed any further. The recommended fix will not be useful.

If your /tmp directory is Inside your normal Drupal site files, you can proceed.
Inside the /tmp directory, create a file called .htaccess.

The content of the file should look like the image below. You can find the content at https://drupal.org/SA-CORE-2013-003.

Please note that some people are reporting that this does not remove the error message. However, even if your error message doesn't disappear, you have still done the correct fix.

Drupal Menu Permissions Explained

With some CMSs such as Joomla, menus are very powerful features. They can control layouts, permissions, metadata and much more.

In Drupal, menus have almost no power at all. By default, menus are not capable of controlling much more than the destination of their link. So, we end up with a lot of questions from students about menus.

This week a student asked us how they control who can see menu links. This tutorial is our answer.

We're going to show how Drupal menu permissions work and how you can make them more powerful.

Menu Permissions are Controlled by Content

The first and most important thing to realize about Drupal menus is that permissions are controlled by what is being linked to.
The menu link itself does not have any permissions associated with it. Drupal menu links are actually quite weak and powerless features. The power is with the content.
Let me show what I mean. Here's our menu:

"Menu Link 1" is a link to a node called "Content for Menu Link 1".

If I unpublish the "Content for Menu Link 1" ...

... then "Menu Link 1" will automatically become unpublished:

So you can see the menu link is entirely dependent on the content. If the content is unpublished, the menu link will automatically follow.
The same is true of permissions: if the user doesn't have permissions to see content, then any menu links to that content will be automatically hidden.
This pattern holds whether you're dealing with content, Views, Panels or any other content on your site. For example, any menu links to a View are controlled inside the View itself, under PAGE SETTINGS > Access.

If you're using Panels to create pages, there will be an Access option inside the editing screen:

Adding Permissions to Menus

So we've seen that, by default in Drupal, there are no permissions directly attached to menus.
However, in some situations menu permissions can be useful. For example, if you have a menu link to a URL rather than to a specific content page, you won't have any way to add permissions.
If you do need menu permissions, I recommend the Menu item visibility module:https://drupal.org/project/menu_item_visibility.
Using that module will add a Visibility settings area inside each menu link:

Convert Your Site into a Firefox OS App

Open web apps are here thanks to Firefox OS, which makes it possible to build apps with only HTML, Javascript and CSS.

This is a great advantage for web developers who don't want to code for iOS or Android devices.

In this tutorial, we'll show you how to convert your existing responsive website into an app that can run on Firefox OS devices.

Step #1. HTML file

• Create a file named index.html with the following code:

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<meta charset="utf-8">

05.<title>OSTraining Blog</title>

06.<meta name="description" content="">

07.<meta name="viewport" content="width=device-width">   

08.<meta http-equiv="refresh" content="5;url=http://www.oktamam.in">   

09.</head>

10.<body>

11.<p>Loading...</p>

12.</body>

13.</html>

• In the previous code, replace http://www.oktamam.in with your own URL
• Replace 5 (seconds) with the loading time to display the message: "Loading..."

Step #2. Icon images

• Create 3 .png images. These will need to be of different sizes for use on different devices. We're going to create icons that 16x16, 48x48 and 128x128.
• Create a folder called /img/ and place the images inside.

Step #3. Manifest file

• Create a file called manifest.webapp and add the following code:

01.{

02."version": "1.0.0",

03."name": "OSTraining Blog",

04."description": "Blog post and tutorial about web development",

05."launch_path": "/index.html",

06."icons": {

07."16": "/img/icon-16.png",

08."48": "/img/icon-48.png",

09."128": "/img/icon-128.png"

10.},

11."developer": {

12."name": "Valentin Garcia",

13."url": "http://www.oktamam.in"

14.}

15.}

• Version: is the software control for the app
• Name: the name of your app
• Launch pat: should point this to your index.html file
• Icons: you can set the icons path
• Developer: your developer name and URL

Step #4. Create the install package

• Create a zip file with your files inside:

Step #5. Submit your app

• The final step is send the zip file to Firefox Marketplace.
• If you don't have an account, create one and login. Then go to Developers page >> Submit An App.
• Once you complete the form and upload the zip file, you need to wait for the review and approval. This may take from hours to days.