Ivan Soto weblog

Create your own node submission form

ivan — Wed, 04 Nov 2009 05:05:11 +0000

A lot of times you have to make the node/add page look just the way you want, and you usually start complaining that it's technically impossible with Drupal. There are a lot of techniques for this but I will be talking about one in particular which is creating your own little module that does the job.

Creating a module? Isn't that really hard?

Not really, it's simpler that it sounds and in this case it won't have more than 60 lines of code.

Our module will be called Apply, and it will basically show a form so users can apply for something. It will create a node based on a custom node type we will create.

Go to sites/all/modules
Create a folder called apply
Create 2 files: apply.module and apply.info

Now we have all the necessary files to create our module, so let's get our favorite text editor and open apply.info and fill some basic information so Drupal can recognize our module.

name = Apply to something
description = Let users submit applications to something
package = Other
core = 6.x
dependencies[] = content

That's it on this file. Basically we need a name, a description, which package the module will be under, the Drupal core version needed and the dependencies. For this case we will need the content module (CCK).

Now we open apply.module and the very first thing we add is the menu hook. This hook let us create an specific path on our site and use a callback function to display content on it.

/**
 * Implementation of hook_menu().
 */
function apply_menu() {
  $items = array();
  $items['apply'] = array(
    'title' => 'Submit application',
    'description' => 'Does something',
    'page callback' => 'drupal_get_form',
    'page arguments' => array('apply_submit_form'),
    'access arguments' => array('access content')
  );
  return $items;
}

On this case we create the path 'apply' and give it a tittle and description to it. We also specify which permission do you need in order to see this page ('access content' is the most basic permission on Drupal).

As you can see we are using the callback function drupal_get_form. This tells Drupal that the page we will be rendering is a form, and the form we will use is the page argument passed inside an array: array('apply_submit_form').

Building the form

Now it's time to build form we want to display, but first, lets enable our module.

After we enable it we can see a new menu entry at our Navigation Menu:

Now comes the fun part, we need to build our form with Drupal and it's quite simple. Drupal has something called Form API wich helps us to build forms as easy as building arrays. So, we create our form function (which is being called by the menu system):

function apply_submit_form() {
	$form = array();
	$form['name'] = array(
		'#type' => 'textfield',
		'#title' => 'Name'
	);
	$form['last_name'] = array(
		'#type' => 'textfield',
		'#title' => 'Last Name'
	);
	$form['address'] = array(
		'#type' => 'textarea',
		'#title' => 'Your full address',
		'#description' => 'Please include aptartment number and postal code'
	);
	$form['submit'] = array(
		'#type' => 'submit',
		'#value' => 'Add yourself'
	);
	return $form;
}

As you can read, we have 4 elements in our form: Name, Last Name, Address and Submit. The Form API has a lot of more options and you can check them all at the Forms API Reference page at Drupal.org

So, what happens when we press Submit?

Drupal will look for the same function name with a _submit appended, but before that it will try to validate it with another function with _validate appended.

In our case we just want to validate the First name and if that goes well, then we can just let it pass.

function apply_submit_form_validate($form, &$form_state) {
  if ($form_state['values']['name'] == '') {
    form_set_error('name', 'Please enter your first name.');
  }
}

Now that we have the form working and it actually submits, we need to build the submit function. This one will basically get the form variables and do whatever you want with them. In our case we will create a node with it.

We will store the First name as the node title, the address as the body and for the Last Name we use a CCK field. I'm not so sure if this is the best idea but for demonstration purposes we will do it that way.

First, we need to create a node type "apply" and create the necessary field for it. Here's a screenshot of the already created node type:

As we can see the CCK field is called field_last. So now we can procced to create our submit function:

function apply_submit_form_submit($form, &$form_state){
	$node = new StdClass();
	
	$node->type = 'apply';	
	$node->status = 1;
	
	// We are using the title as First Name
	$node->title = $form_state['values']['name'];
	$node->body = $form_state['values']['address'];
	$node->field_last[0]['value'] = $form_state['values']['last_name'];
	
	node_save($node);
	drupal_set_message(t('Your application has been saved.'));
}

It's really self explanatory, first we create a node object and then we give it the corresponding values. The only different part can be the CCK field which is called in a different way (the [0] refers to the CCK option to have multiple values per field, which in our case we only allow 1).

And there we have it. If everything goes well we will have a module with 4 functions: the HOOK_menu, apply_submit_form(), apply_submit_form_validate() and apply_submit_form_submit().

Here's how our form will look like:

Now in case you didn't read anything and you prefer to just copy and paste it:

<?php 

/**
 * Implementation of hook_menu().
 */
function apply_menu() {
  $items = array();
  $items['apply'] = array(
    'title' => 'Submit application',
    'description' => 'Does something',
    'page callback' => 'drupal_get_form',
    'page arguments' => array('apply_submit_form'),
    'access arguments' => array('access content')
  );
  return $items;
}

function apply_submit_form() {
	$form = array();
	$form['name'] = array(
		'#type' => 'textfield',
		'#title' => 'Name'
	);
	$form['last_name'] = array(
		'#type' => 'textfield',
		'#title' => 'Last Name'
	);
	$form['address'] = array(
		'#type' => 'textarea',
		'#title' => 'Your full address',
		'#description' => 'Please include aptartment number and postal code'
	);
	$form['submit'] = array(
		'#type' => 'submit',
		'#value' => 'Add yourself'
	);
	return $form;
}

function apply_submit_form_validate($form, &$form_state) {
  if ($form_state['values']['name'] == '') {
    form_set_error('name', 'Please enter your first name.');
  }
}

function apply_submit_form_submit($form, &$form_state){
	$node = new StdClass();
	$node->type = 'apply';	
	$node->status = 1;
	// We are using the title as First Name
	$node->title = $form_state['values']['name'];
	$node->body = $form_state['values']['address'];
	$node->field_last[0]['value'] = $form_state['values']['last_name'];
	
	node_save($node);
	drupal_set_message(t('Your application has been saved.'));
}

I hope this short tutorial helps you get started with building modules for Drupal. Sometimes I find that creating a small module to take care of something specific is way better than dealing with our template.php file or some other solutions.

Drupal modules list

ivan — Fri, 30 Oct 2009 03:46:23 +0000

This past monday I met a couple of Drupal developers and people who are actually interested in learning Drupal. The group was a nice mix of people sharing experiences and others trying to keep up and learn the most they can. It felt great, seeing what people expect from Drupal and what people have done with it, or what do they use Drupal for, but they all had one thing in common, it's always hard to find good modules or the one that you really need.

In Drupal you can take the same task in many different ways, the problem is when you get to the point where you realize that you should have chosen the other one. And here's an example.

So, this is my approach on reviewing some Drupal modules to let users know what kind of things you can do with them.

Let's start:

FeedAPI

This module let you create feed nodes that will be used to read feeds and process them. The usual task is create different nodes from the Feed one.

It works this way: You create a Feed node and that node will be responsible for reading the feed and process it. You can do a lot with that feed (that's why its an API), but you will mostly use it to create nodes from the information it retrieves. The feed can be RSS/Atom but you can use extra modules to parse different kind of feeds like iCal, CSV, KML, etc.

Also, with Feed Element Mapper you can map elements of the feed to CCK fields, taxonomies and locations.

When to use it?

The aggregator module from Drupal can also read and display feeds but doesn't offer the same flexibility than FeedAPI. If you need to do things with the data you are pulling, like using it for Views or CCK, or if you want to keep your database clean because FeedAPI can take care of removing older entries, then FeedAPI is your perfect choice.

In other words, FeedAPI is "the way" to add content to your Drupal site from RSS/Atom/iCal/etc.

View the project

Better Formats

This modules takes care of cleaning the site from some Drupal annoyances.

You can remove the infamous "Formatting tips", set a default text filter by role and hiding the rest, keep the formatting fieldset collapsed, etc. You set everything with permissions and the module is really lightweight and compatible. In general is a "must have" if you manage a blog or any site that wants to look clean.

View the project

Views Node Feed

This is one of the examples where the module name doesn't help you know what it could be used for. It's not yet in stable version but it works pretty well.

The idea with this module is being able to render Views as anything you want, RSS, XML, JSON, anything. It works very easily, when you create your Views you just need to set the style as Views Node Feed, then select the template.

The template creation is _very_ simple, first you have the wrapper:

<?php print "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>"; ?>
<nodes>
***VIEWS_NODE_FEED_ITEMS***
</nodes>
<?php drupal_set_header('Content-Type: text/xml; charset=utf-8'); ?>

Then you add whatever you need. You can play with Devel here.

<node>
<nid><?php print $node->nid ?></nid>
<title><?php print $node->title ?></title>
<preview><?php print $node->field_image[0]['filepath'] ?></preview >
<votevalue><?php print $node->votevalue ?></votevalue>
</node>

That simple! And if you need arguments or anything like that, don't forget that you are using Views.

View project

That's for now, three modules that maybe you haven't used before, but remember that this is not a tutorial, just a short review of what to expect from these modules.

Tieren Space Type

ivan — Sat, 24 Oct 2009 05:49:23 +0000

From Models

New blog, same content, now on Drupal

ivan — Tue, 20 Oct 2009 00:00:37 +0000

The old blog in Wordpress is now gone and I will be using Drupal from now on for my blog. The main reason of this is because I work with Drupal, it's also more flexible and overall I feel more comfortable working on it.

So far, besides the change on the platform there are not so many changes, but let's list them:

Design

Even cleaner, brighter and more attractive. I like to keep it simple, I love blue tones and my personal blog is the perfect excuse to use them.

The Work section also sports some nice selectors and some jQuery AJAX godness.

Platform

I had enough with Wordpress. It's an excellent blogging platform but doing anything more than just a blog requires to "hack" a lot.

Drupal on the other hand offers me more flexibility, more security and more control.

Work

My projects will now feature a full section and that is the most important change so far. Some projects will feature a full case study and others will just show a brief description plus the level of involvement I had on the project.

What's coming

Code. A new section I'm planning where I can show my OS projects. It's still just an idea and I will be elaborating it in the upcoming weeks.

Plan, administrate and test your Drupal site

ivan — Sat, 03 Oct 2009 02:20:36 +0000

We all know Drupal has some usability problems (or a lot). It's not friendly when you first install it and adding modules and themes can be confusing at the beginning. But wait! Adding stuff to Drupal is so easy, just download the zip file upload to the server and enable the module/theme. And here is exactly when we start having problems. At one side, going module shopping is easy and repetitive fun but on the other side we often forget that downloading 20 extra modules can make our site run slow and even make it crash. Not to mention that some modules are not meant to be compatible with others. And first of all, don't be scared of buying a book that teaches you how to administrate Drupal, it's definitely worth if you are going to be in charge of the content.

Plan your site before start building it

Even though this is important for any kind of project, because of Drupal ease of installation and setup users tend to "try" modules and forget that little tab called "Uninstall". Even so, some modules won't completely uninstall or can just break other parts. Not all modules are perfectly made. By "plan" I really mean to plan your modules. Which modules you will be using and how do you want to use them.

Testing

Consider having a "sandbox" site. A common rule on web development is not to work on a production site, but again because of Drupal being modular some users just install a module not even trying or testing it. Another reason why you should do this is because even when you have experience working with a module in past projects, you are definitely working with different combination versions on the next one.

Benchmark your site

So, you enabled 10 modules, you setup your views and panels and your site looks perfect but it's starting to feel slow. Let's test with no cache, normal cache and aggresive cache

ab -c1 -n100 http://ivansotof.com/

Will give you a lot of information. Just google Apache Benchmark tool.

Configure your server

Make sure you are running some kind of PHP accelerator (eAccelator is my favorite). Make sure PHP has enough RAM to use or you can get the infamous "white screen of death" Tune up MySQL, the performance can be greatly improved with this.

Finish your website, plan releases

It's true that websites need to be improving all the time, but that doesn't mean you have to add new features everyday. Don't rush, have a testing site, install your new modules and see how things go, test a lot.

Freelancing

ivan — Wed, 16 Sep 2009 06:35:06 +0000

After working at 350 Designs for more than a year I decided to quit and go back to freelancing. I won't be explaining the reasons on this post but I can say it will be a lot of fun.

I already have some projects going on:

One of them is taking care of the Drupal development for http://thepuritea.com, which is looking really good so far.
Continue improving my Android Twitter application Twit2go which is doing well.
I will start working (hopefully soon) on the redesign (and Drupalization) of http://www.voiceforisrael.com/.
Continue improving http://droidfeed.com which didn't have the acceptance I was expecting.
Redesign and drupalization of my blog. (I keep talking how cool Drupal is and my blog is running Wordpress)
Another ninja/secret project.

So, if you are interested in hiring me, you can email me at ivansotof@gmail.com. I will be taking projects starting from mid-October.

Native User Interfaces and controls

ivan — Mon, 27 Jul 2009 18:32:46 +0000

Today I was reading the comments on the article "Opera: Apple, Ubuntu should include browser ballout screen too" and like always, everyone was commenting about how unsuccessful Opera is, hence the article. It really is and anyone that works on web development will know how good Opera is, but at the same time knows why it's not their main browser.

I don't want to find _the_ cause why Opera fails to get a piece of market share, I just want to give my personal opinion on why Opera and any other software that doesn't use native controls fails to impress me.

The lack of native controls

Let's take Opera for Windows and Mac and we will see what I'm talking about:

We can see that both the Windows and Mac version are not using native controls, interface or even colors. This is my main problem with Opera software and I know a lot of users have similar problems. Ok, maybe the Mac version looks a little better than the previous versions but it still doesn't feel right. If we go further and take the Android browser that Opera built called Opera Mini you will find that it's completely different from the rest of the applications on your device. I know it's a port but I also know that they can do better that this. It just doesn't feel correct (and I'm not even talking about how you interact with it)

And I could continue on Opera but its not the only application that has this problem, Seesmic and Tweetie are both Twitter clients for Mac, but Tweetie feels nicer, faster and native. Seesmic feels like what it is, a flash application built for Desktop. That's something Adobe needs to change about Adobe AIR if they want to succeed with that.

So, apps using a different UI or controls will fail?

In my opinion, Yes. You can take Safari for example, it's a joy to use it on a Mac, it's nice, fast, looks great and feels native. The Windows version is another story, it's slow, ugly and feels like an emulated version. It even renders text like Macs on a Windows PC! That's what I call inconsistency. Leave the Mac font rendering for Mac, most Windows users like the way Windows render the text. Now let's see another example: Why is Google Chrome being well received by the users? Well, it's fast! But it also looks good, simple, native, clean. They are doing an excellent job on adapting Chrome to OS X and Windows. It has tabs that don't look so native but they don't look bad on any OS. On Windows XP it renders the top part completely blue but on Vista and 7 it's transparent and looks really nice.

Mac version

Windows 7 version

The solution

Use native controls and interfaces when you can, even if it's harder to achieve. Your users will be more comfortable using your application and it will be easier, and try not to mimic other applications/OSes. As an Android user I hate when I download an app just to see that they made it look like an iPhone. It's not an iPhone! We have a menu button, don't put the menu on the screen. Although, there are exceptions, but in my opinion it's more that we are used to it than we like it. Photoshop for Windows looks like the Mac version, Filezilla for Mac feels completely wrong even when the Windows version is so nice, etc.

Visible Description on Drupal Primary Links

ivan — Fri, 03 Jul 2009 23:10:04 +0000

Today I was working on a new site when I realized that the top navigation had descriptions under the links. I asked myself for a few seconds, how can I do that on Drupal? If you don't know what I'm talking about, have a look at this screenshot of another site. I'm doing this on a theme, so no need for a module here. What I need to do here is override (the "Drupal way") the theme_links function and that's very easy on a theme, we just need to go to /includes/theme.inc and copy the theme_links() function. Then we can just paste it on our template.php file but we change the function name from theme_links to MYTHEMENAME_links.

I don't want to kill any other part on the site so let's add an extra parameter to the function, in this case $primarylinks = false. By default the function will work like always does but If we pass $primarylinks as TRUE it will add the link description to the link title. Let's see how the function will look like:

function MYTHEMENAME_links($links, $attributes = array('class' => 'links'), $primarylinks = false) {
  global $language;
  $output = '';
  if (count($links) > 0) {
    $output = '<ul '. drupal_attributes($attributes) .'>';
    $num_links = count($links);
    $i = 1;
 
    foreach ($links as $key => $link) {
      $class = $key;
      // Add first, last and active classes to the list of links to help out themers.
      if ($i == 1) {
        $class .= ' first';
      }
      if ($i == $num_links) {
        $class .= ' last';
      }
      if (isset($link['href']) && ($link['href'] == $_GET['q'] || ($link['href'] == '<front>' && drupal_is_front_page()))
          && (empty($link['language']) || $link['language']->language == $language->language)) {
        $class .= ' active';
      }
      $output .= '<li '. drupal_attributes(array('class' => $class)) .'>';
      if (isset($link['href'])) {
        // Pass in $link as $options, they share the same keys.
        if ($primarylinks) {
          $link['html'] = true;
          $output .= l($link['title'] . '<span>' . $link['attributes']['title'] . '</span>', $link['href'], $link);
        } else {
          $output .= l($link['title'], $link['href'], $link);
        }
      }
      else if (!empty($link['title'])) {
        // Some links are actually not links, but we wrap these in <span> for adding title and class attributes
        if (empty($link['html'])) {
          $link['title'] = check_plain($link['title']);
        }
        $span_attributes = '';
        if (isset($link['attributes'])) {
          $span_attributes = drupal_attributes($link['attributes']);
        }
        $output .= '<span '. $span_attributes .'>'. $link['title'] .'</span>';
      }
      $i++;
      $output .= "</span></li>\n";
    }
    $output .= '</front></ul>';
  }
  return $output;
}

If you didn't notice, this is the modified part:

	if ($primarylinks) {
		$link['html'] = true;
		$output .= l($link['title'] . '<span>' . $link['attributes']['title'] . '</span>', $link['href'], $link);
	} else {
		$output .= l($link['title'], $link['href'], $link);
	}

Pretty simple. If you wonder why I added $link['html'] = true, that's because the l() function needs to know it will render on HTML so you dont get the displayed instead of used as HTML. You can do almost anything you want here, the rest is really up to you. This is more like a trick than a tutorial, but I hope you find it useful.

Understanding the theme() function on Drupal

ivan — Mon, 25 May 2009 19:27:18 +0000

One of the most complicated things to understand when templating or developing modules for drupal is the theme() function. But when you know how to deal with it is really useful even when there's no way to know how many we have available. The way to use it fairly simple, let's see how the Garland theme builds the primary links:

print theme('links', $primary_links,
array('class' => 'links primary-links'));

The first argument is the actual hook we are calling, the second and third are the the arguments we are passing to that functions. So basically the theme function will output plain HTML and it's actually way cleaner than defining a function or coding a lot of php on our template.

Let's see another example, we installed imagecache and created a preset, now we want to print and specific preset an image that is on a CCK image field. We can do it in the wrong way:

print '/sites/default/files/imagecache/PRESET/'
.  $node->field_imagecck[0]['filename'];

Why this is wrong?

It depends that the site location, so your site working on a subdirectory won't display this image.
You have to modify this code if you move your files folder.
The most important one is that when you upload a picture to drupal, if the picture filename exists the new picture keeps the same filename on the database, but the actual filename will be different. Let's see: file #1 filename: image1.jpg fielpath: sites/default/files/image1.jpg file #2 filename: image1.jpg fielpath: sites/default/files/image1_0.jpg

The correct way to do this

Read the module README file. This is what the file says:

print theme('imagecache', 'preset_namespace', $image_filepath, $alt, $title, $attributes);

Again, the first argument is the hook we are calling and the rest are the arguments we are passing to the hook. Confused? When you build the first one you understand how it works.

Make your own

Now that you know how to use it let's see how to create one on your own custom module. Our module will be called mymod (I'm assuming that you already know how to create a module and where)

mymod_theme() {
  return array(
    'mymod_randomtext' => array('arguments' => array('element' => NULL))
  );
}

And now we define the function that will be called:

theme_mymod_randomtext($element) {
  $output = ' This is some very random text with'
                  . ' this text concatenated: '  . $element;
  return $output;
}

And that's it. Now you can call it from your theme or other modules as simple as this:

print theme('mymod_randomtext', 'text we are passing');

Hope this helped. I do believe this function could be much more useful if there was a list of all the options we have. I hope something is implemented in the future, or wait! "there must be a module for that"

Drupal and GIT

ivan — Sun, 10 May 2009 19:41:21 +0000

During this year I've been moving my projects to GIT. While my private projects are on this server, my public ones are on GitHub as Open Source. Git is a really wonderful version control tool for any kind of project. It makes it easy for me to deploy, maintain and update my current sites. I just wish there could be a way to include the database on it. In this post I will explain how I'm using GIT to manage a Drupal site on both local and live environment. And since most people already have a site working, I will explain starting from an existing site.

Create the repository

The very first thing is going to the actual site, in my server this site is in: /var/www/sitename.com/public

cd /var/www/sitename.com/public
git init
echo "sites/default/settings.php" >> .gitignore

You can also run this if you want to ignore the files folder (that's really up to you)

echo "sites/default/files" >> .gitignore

Then you have to add all files to the repository and make the first commit

git add .
git commit -m "Initial commit for this site"

Making the site remotely available

Once you have your local repository working on your server it's time to push this to another place. This is asuming that you have a 'git' user somewhere else and you have access to SSH. I use my own server so I can actually change the address to localhost

scp -rp .git git@yourreposerver.com:sitename.git

The last line is really dependent on your current config. In my case I use this:

scp -rp .git git@ivansotof.com:sites/sitename.git

You can google a little about SCP command if you are not familiar with it. It will ask for a password since it's using SSH for copying the .git folder. It will take a while copying everything up to that server but when it's done you just need to add a remote entry to the local repo.

git remote add origin git@yourreposerver.com/sitename.git

And you are done copying the site.

Cloning and working on your local environment

Now that we have the live site under version control and the repository available for cloning you just need to clone it to your working environment.

git clone git@yourreposerver.com:sitename.git

It will create a folder sitename/ that will be a perfect copy of what you have on your live site. Now you can just go in and make changes to the site:

cd sitename

If you are using TextMate on OSX or E-TextEditor on Windows you can open the working folders from here. If you are not, then you should :) On OSX:

mate sites/all/

On Windows

e sites/all/

When you are done making changes:

git commit -m "Making some random changes"

Now push all changes to the remote server

git push origin master

Now go to the "live" site and just do:

git pull origin master

You should now have all latest changes working on your remote server. This is so far the setup I am using on most of my sites. I didn't include copying the database but I hope the readers already have some experience on that. Since I'm ignoring settings.php you should be able to have a configuration working on any copy of the site. If you are using a different setup, please share it :)