Kristian Lunde

www.klunde.net

Archive for the ‘web’ Category

Zend_Input_Filter and the Alnum Validator

without comments

The Zend_Input_Filter is a very useful tool when you need to validate and filter the input to your application. It allows you to both filter and validate the input without a lot of hassle. One of the cool features it has is that it allows you to add the validators you need and meta commands to each validator. For instance you can set an Alnum validator to allow empty fields, set a default text and so on.

I came over this annoying issue the other day when I tried to setup the Alnum validator to allow white spaces and have a few meta commands attached to the validator chain. The manual says that you can do this:

  1. $validators = array(
  2.     'month'   => array(
  3.         'Digits',                // string
  4.         new Zend_Validate_Int(), // object instance
  5.         array('Between', 1, 12)  // string with constructor arguments
  6.     )
  7. );

Which I assumed would also work like this:

  1. $validators = array(
  2.     'name'   => array(
  3.         'Alnum',                
  4.         new Zend_Validate_Alnum(true), //allow whitespaces
  5.        'default' => '',  //meta command 1
  6.        'presence' => 'required', //meta command 2
  7.     )
  8. );

This does not work though. You need to remove the validator type string and replace it with an instance of the Zend_Validate_Alnum validator to get it to accept whitespaces and meta commands. This is the right way to do it:

  1. $validators = array(
  2.     'name'   => array(            
  3.         new Zend_Validate_Alnum(true), //allow whitespaces
  4.        'default' => '', //meta command 1
  5.        'presence' => 'required', //meta command 2
  6.     )
  7. );

The entire script ends up looking like this:

  1.  
  2. $filters = array('name' => 'StringTrim');
  3. $validators =  array(
  4.     'name'   => array(            
  5.         new Zend_Validate_Alnum(true), //allow whitespaces
  6.        'default' => '',
  7.        'presence' => 'required',
  8.     )
  9. );
  10.  
  11. $input = new Zend_Input_Filter($filter, $input, $this->getRequest()->getParams());

Written by Kristian Lunde

July 18th, 2010 at 9:00 pm

My Bookshelf & openbook

without comments

Yesterday I installed the openbook plugin for wordpress on this site. My intentions was to build a “My bookshelf” page similar to what Mats Lindh and Trond Huso have on their sites.

I installed the plugin without any problems but the layout was a bit nasty. I don’t know if that was because of the theme I am running on this site or if the openbook markup was messed up. Anyway I rewrote the html and css for the openbooks template on its configuration page and added some custom css to the site to get it working.

This is my openbook template:

  1. <li>
  2. <div class="medium">[OB_COVER_MEDIUM]</div>
  3. <div class="description">
  4. <div class="title">[OB_TITLE]</div>
  5. <div class="meta-1">Written by: [OB_AUTHORS]</div>
  6. <div class="publisher-year">[OB_PUBLISHER] [OB_PUBLISHYEAR]</div>
  7. <div class="category">[OB_LINK_WORLDCAT][OB_DOT][OB_READONLINE][OB_DOT][OB_LINK_LIBRARYTHING][OB_DOT][OB_LINK_GOOGLEBOOKS][OB_DOT][OB_LINK_BOOKFINDER]</div>[OB_COINS]
  8. </div>
  9. <div class="clearboth"></div>
  10. </li>

This is the css I added:

  1. ul.books {
  2.  list-style-type: none;
  3. }
  4.  
  5. ul.books li {
  6.  border-bottom: 1px solid #ccc;
  7.  margin-bottom: 15px;
  8.  padding-bottom: 15px;
  9. }
  10.  
  11. ul.books li div.medium {
  12.  float:left;
  13.  margin-right: 10px;
  14. }
  15.  
  16. ul.books li div.medium img {
  17.  width:120px;
  18. }
  19.  
  20. ul.books li div.description {
  21.  float: left;
  22.  width: 450px;
  23. }
  24.  
  25. ul.books li div.description div {
  26.  font-size: 11px;
  27.  padding-top: 5px;
  28. }
  29.  
  30. ul.books li div.clearboth {
  31.  clear: both;
  32. }

At last I added this custom html in the “my bookshelf” page:

  1. <ul class="books">
  2. [Open Library Server Error]
  3.  
  4. [Open Library Server Error]
  5.  
  6. [Open Library Server Error]
  7.  
  8. </ul>

You can see the result here: My Bookshelf .

Written by Kristian Lunde

November 22nd, 2009 at 11:19 pm

Posted in Wordpress,web,web development

Tagged with ,

Installing Cassandra and Thrift on OSX

with one comment

Cassandra is a NoSQL distributed database developed by Facebook, it is built to handle huge amounts of data and to perform CRUD operations quickly. The Cassandra site’s strap line says:

“The Apache Cassandra Project develops a highly scalable second-generation distributed database, bringing together Dynamo’s fully distributed design and Bigtable’s ColumnFamily-based data model.

Thrift is also developed by Facebook and is a software framework for service development and is used as an interface to Cassandra. The Thrift page site says:

“Thrift is a software framework for scalable cross-language services development. It combines a software stack with a code generation engine to build services that work efficiently and seamlessly between C++, Java, Python, PHP, Ruby, Erlang, Perl, Haskell, C#, Cocoa, Smalltalk, and OCaml.”

Both Cassandra and Thrift are apache incubator projects.

Installing Cassandra

1. Download cassandra

Download from: http://incubator.apache.org/cassandra/.

2. Create and set the correct paths in the storage-conf.xml

You can find the storage-conf.xml file in your cassandra root directory /conf

My configuration file settings in storage-conf.xml:

  1.   <CommitLogDirectory>/Users/kristianlunde/tmp/cassandra-log/commitlog</CommitLogDirectory>
  2.   <DataFileDirectories>
  3.       <DataFileDirectory>/Users/kristianlunde/workspaces/mysapient/cassandra/data</DataFileDirectory>
  4.   </DataFileDirectories>
  5.   <CalloutLocation>/Users/kristianlunde/workspaces/mysapient/cassandra/callouts</CalloutLocation>
  6.   <BootstrapFileDirectory>/Users/kristianlunde/workspaces/mysapient/cassandra/bootstrap</BootstrapFileDirectory>
  7.   <StagingFileDirectory>/Users/kristianlunde/workspaces/mysapient/cassandra/staging</StagingFileDirectory>

Notice: You have to create all these directories for cassandra to run properly.

3. Set a log directory in the log4j.properties file

This file is found in the same directory as the storage-conf.xml

4. Check that you are running java 6 as default

  1.  java -version

If you are running an earlier version of java you will have to change your version. Java 6 should already be installed on your mac if you keep your os in sync with the automatic updates from apple. You can change your java version by using the “Java Settings” application located in your /Application/Utilities directory.

5. Starting Cassandra

You should be ready to go now, navigate to the root directory of your cassandra installation and start cassandra by typing:

  1. bin/cassandra -f

If you dont see any error messages cassandra is probably running as it should, so it is time to test it out.

Cassandra comes with a CLI interface which allowes you to do simple queries to the database. Notice that the CLI interface is not not as powerful as the thrift interface. You can for instance not execute get queries in Super Columns, those queries will create a java exception.

To test the CLI interface, run the following command from the cassandra root directory:

  1. ./bin/cassandra-cli –host localhost –port 9160

Inserting values to the keyspace:

  1.  cassandra> set Keyspace1.Standard1['blog-post']['name'] = 'Installing Cassandra and Thrift OSX'
  2.  Value inserted.
  3.  cassandra> set Keyspace1.Standard1['blog-post']['author'] = 'Kristian Lunde'
  4.  Value inserted.

Retrieving data from the keyspace:

cassandra> get Keyspace1.Standard1['blog-post']
  1.    (column=name, value=Installing Cassandra and Thrift OSX; timestamp=1258748376097)
  2.    (column=author, value=Kristian Lunde; timestamp=1258748405486)
  3.  Returned 2 rows.
  4.  cassandra>

Installing Thrift

Update: I found this manual after I had installed thrift: http://wiki.apache.org/thrift/ThriftInstallationMacOSX, using this install guide will probably fix the issues I had with compiling thrift.

1. Download Thrift

Download from http://incubator.apache.org/thrift/download/ and extract it.

2. Check that you have installed the following:

  • g++ 3.3.5+
  • Runtime libraries for lex and yacc might be needed for the compiler.
  • boost 1.33.1+ (1.34.0 for building all tests) http://www.boost.org/.

I had to install boost manually:

  1. sudo port install boost

Notice: the boost installation might take a while, It took about 5 – 10 minutes on my Macbook PRO (2.53GHz).

You can see the full requirements for thrift at http://wiki.apache.org/thrift/ThriftRequirements.

3. Start the installation

  1.  kristian-lundes-macbook-pro:thrift kristianlunde$ ./bootstrap.sh
  2.  configure.ac:26: installing `./missing'
  3. configure.ac:26: installing `./install-sh'
  4.  compiler/cpp/Makefile.am: installing `./depcomp'
  5. configure.ac: installing `./ylwrap'
  6.  kristian-lundes-macbook-pro:thrift
  1. ./configure

This ended up in an error message for me:

  1.  ./configure: line 20722: syntax error near unexpected token `MONO,'
  2. ./configure: line 20722: `  PKG_CHECK_MODULES(MONO, mono >= 2.0.0, net_3_5=yes, net_3_5=no)'

To fix this I had to copy my pkg.m4 file from /opt/local/share/aclocal/pkg.m4 to my thrift/aclocal directory.

Navigate to your thrift root directory:

  1.  cp /opt/local/share/aclocal/pkg.m4 aclocal

Thanks to http://aaronspotlatch.appspot.com/archive/Jul-2008 and
http://qslack.com/post/thrift-macosx-104 for pointing me in the right direction.

You should now be ready to run make

  1. make

and

  1. sudo make install

You should now be able to run thrift on your mac.

  1. thrift

You should now be ready to build your amazing application with Cassandra if both your installation of Cassandra and Thrift were successful.

I will try to post another blog post shortly on using Cassandra, Thrift and PHP. Stay tuned.

Resources

Written by Kristian Lunde

November 20th, 2009 at 9:39 pm

Posted in Mac,NoSQL,web

Tagged with ,

Amazon Frenzy

without comments

The other day I had a frenzy at amazon and ordered quite a few books I have had on my shopping list. The books are of course all computer and web related. The books I ordered was:

I am halfway through the building scalable web sites and it is really good, even if you are a seasoned web developer I think you can learn quite a bit from it. I have also started to read the MySQL book and can’t wait to learn more about database replication, that is something I really want to find out more about. The “Don’t make me think” book will hopefully assist me on building more user friendly web sites, and hopefully the javascript book(still in the mail) will help me to brush up my js skills.

The Cocoa book was on sale, and you never know when you have to do a bit of programming for a mac :P

Written by Kristian Lunde

September 24th, 2009 at 8:29 pm

Merging code bases

without comments

Yesterday I had the “pleasure” of merging two code bases of the same application. The code bases had been developed in two different parts of the world, but shared a common foundation. I got access to a development version of the code base a few weeks ago, and the final delivery of the application was done late last week. No version control system was shared between myself and the contractor which made the merge a bit more cumbersome. Unfortunately I could not wait for the contractor to finish the development before I started to add features and bug fixes to the application; this eventually resulted in two separate versions of the code base.

I was aware that this merge would going to happen from the very start so some precautions were taken before I started my own branch of the source code.

1. I separated all new features out in separate directories and added symbolic links to these in the existing code base. This worked very well and we had no problem at all adding the new features to the final delivery.

2. I tried to be very careful and keep track of all the bug fixes and changes done to the original code.

Trouble

I realized that we would have trouble with the final merge not long after I received the first development version, it was cluttered with bugs and issues which made it impossible to even run it in my development version. To get the application up and running I had to make a bunch of changes to the code.

In addition to the initial bugs I soon realized that the front end of the application (read: html and css) was a complete mess. The site was not browser compliant, nothing validated and it was impossible to go through. These issues would not be resolved by the contractor and since the project was on the clock it needed resolving as quickly as possible. This ended up in a complete rebuild of the front end which modified 300+ files.

1st Attempt – Failure

1. Created a git branch of my development code
2. Added the final code from the contractor to the branch

This ended up in a complete mess, nothing working, a complete mess.

2nd Attempt – Success

When the final delivery from the contractor came through the two code bases was in completely different states, most of the bug fixes I had was still needed.

1. Created a git branch of my code base
3. Found the differences from the initial development version we got and the final delivery

  1. diff -qr dev final | grep -v -e 'DS_Store' -e 'Thumbs' | sort > changes.txt

Where dev is the directory of the untouched development version we got access to, and final is the directory of the final delivery. This resulted in a complete list (changes.txt) of files which differed between the two original versions. It also identified files that was obsolete in and new files that was added. An example of the content in the changes.txt can be seen below.

  1. Files dev/view/file-1.php and final/view/file-1.php differ
  2. Files dev/view/file-2.php and final/view/file-2.php differ
  3. Only in dev/css: css-1.css
  4. Only in dev/css: css-2.css
  5. Only in dev/css: css-3.css
  6. Only in final/css: css.css
  7. Only in final/: file-a.php

4. Once I had this overview I added all the new files from the final version into my git branch.
5. Updated all the files I knew had not been changed. I had a list of all the core files which had been changed.
6. I manually had to go through all the core files that had been changed and compare them with the files from the final delivery.
7. Remove all old files which only were present in the development delivery.
8. Manual comparison of all the front end files, updating and merging these files by hand. Diff can not be used here since the entire front end has changed, and it would only result in a complete difference, still there might have been changes that I needed to incorporate with the new front end.

I still have approx 150 front end files to compare, it is time consuming and frustrating labor, but it seems to be the only way to do it. I keep testing the application while doing the update and so far all of the changes and updates has been successful.

The positive flip of this is that I get a good overview of the code and understanding of the application when I have to go through much of the code from the final delivery.

I might not have chosen the best solution and I would love to hear your approach if you have done similar things or have an opinion about it.

Written by Kristian Lunde

September 16th, 2009 at 7:22 am

Retweet vs TweetMeme WordPress plugins

without comments

I decided earlier this week that I should add a Retweet plugin to my blog; so I googled “Retweet wordpress”, which gave me two good results the Retweet plugin and the TweetMeme plugin. I thought I would install and try both of them before I decided which one I should go for.

Retweet

I installed the Retweet plugin first, this had to be installed, I had to add a custom field to each post and I had to add some PHP code to one of the template files. Once this was done I had to style the link myself.

TweetMeme

The TweetMeme plugin however had to be installed and then it needed to be configured from a separate settings page. Once that was done it was added to all of my posts and it even showed how many retweets each post had.

Conclusion

When I need a plugin for wordpress I really do not want to do more than install it and do some configuration on a settings page. It is way to much hassle to modify template files and adding custom fields to the posts.

Guess which plugin I chose :P

Written by Kristian Lunde

September 10th, 2009 at 7:15 am

Posted in Wordpress,web

Javascript snippets

with one comment

Lately I have been doing some javascript development and I have written a couple of functions which I find really useful. I almost find the code snippets to be used on all sites I work on so I thought I would share them with you. Both the snippets are written using the jQuery library.

Opening urls in a separate window/tab in a xhtml strict environment

The target attribute is not a valid attribute in xhtml strict and your site will fail to validate if you use it, so to get around this you can use replace your target attribute with the rel attribute. Adding the rel=”external” attribute on your anchors that points to an external source and adding some javascript solves the problem.

  1. <a href="http://www.klunde.net" rel="external" title="Klunde.net">Kristian Lunde</a>
  1. function externalLinks() {
  2.         $("a[rel='external']").each(function() {
  3.   $(this).attr('target', '_blank');
  4.         });
  5. };

The code here is pretty self explaining, but to describe it briefly, the javascript function must be invoked once the DOM is loaded (see code further down on the page). The function loops through all anchors that have the rel=”external” attribute and add the attribute target=”_blank”. I guess this is a bit of a hack, but it works and it keeps the clients happy ;)

Creating spam proof mailto: anchors

It is a well known fact that if you add your email address on a site in a plain mailto anchor you will be flooded by spam after a while. You can easily avoid this by adding a little bit of javascript on your site.

It works simply by printing out the email address as plain text replacing the @ with a ” AT ” and add the email addresses in a div or which ever element you prefer and add a set class to that tag. Then you run a small snippet of javascript that find all the elements with that class, I have chosen the class name “email”. The script replaces the content in all the elements with the email class with the proper html anchor. This can not be picked up by web crawlers and it displays the links properly for the user. All browsers without javascript support / enabled will of course only see the post AT somesite.com.

  1. <div class="email">post AT  somesite.com</div>
  1. function createMailTo() {
  2.         var c_email_field = $('.email');
  3.  if($(c_email_field).length > 0) {
  4.   $(c_email_field).each(function()
  5.   {
  6.    var email = $(this).html().replace(' AT ', '@');
  7.    $(this).html('<a href="mailto:' + email + '" rel="nofollow" title="' + email + '">' + email + '</a>');
  8.   });
  9.  };
  10. };

Running this script would transform the code into:

  1. <a href="mailto:post@somesite.com" rel="nofollow" title="post@somesite.com">post@somesite.com</a>

Putting it all together

I have but together a simple example to illustrate the functions in action with all code and functionality. You should be able to copy this code save it as a .html file and run it in your browser.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4.   <title>Javascript snippets</title>
  5. </head>
  6. <body>
  7.  
  8. <a href="http://www.klunde.net" rel="external" title="Klunde.net">Kristian Lunde</a>
  9. <div class="email">post AT somesite.com</div>
  10.  
  11. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  12. <script type="text/javascript">
  13.  
  14. function externalLinks() {
  15.         $("a[rel='external']").each(function() {
  16.   $(this).attr('target', '_blank');
  17.         });
  18. };
  19.  
  20. function createMailTo() {
  21.         var c_email_field = $('.email');
  22.  if($(c_email_field).length > 0) {
  23.   $(c_email_field).each(function()
  24.   {
  25.    var email = $(this).html().replace(' AT ', '@');
  26.    $(this).html('<a href="mailto:' + email + '" rel="nofollow" title="' + email + '">' + email + '</a>');
  27.   });
  28.  };
  29. };
  30.  
  31. $(function() {
  32.         externalLinks();
  33.         createMailTo();
  34. });
  35. </script>
  36. </body>
  37. </html>

Written by Kristian Lunde

June 18th, 2009 at 10:55 pm

Posted in web,web development

Tagged with , ,

On the move

without comments

I am currently switching both domain host and web host, and in that case this site might be down for a little while. I am about to replicate the site to my new web host so hopefully it will be a minimum of down time.

I have chosen to leave servetheworld.net which has been my web host since 2003, they have done a great job, but the time has now come to move to a web host which can provide me with some more advanced features.

I have chosen webfaction.com as my new web host. I chose them because they offer a multitude of different applications, for instance svn, python, ruby on rails and of course PHP. They also offer ssh access.

I chose 123-reg.com to host my domain names, that was done out of convenience, they are well known, large and hopefully know what they are doing :P

Written by Kristian Lunde

June 3rd, 2009 at 8:00 pm

Posted in Misc,web

Tagged with , ,

Getting the default option of a ubercart product attribute

with 2 comments

In Orange Bus we are currently busy building a new web shop for a clothing company. We are building this web shop on Drupal 6 and Ubercart 2. While I was doing some tuning of the product page (built as a node template) on this site I suddenly realized that even though you can get most of the information needed in from the $node object, you are unable to get the default options of each attribute.

In my case this attribute was the sizes of the products (small, medium, large and so on), the node object contained all the attributes but not the default options. It is not at all complicated to get this information but you do need to add some custom code to get a hold of the default options. I would argue that this should be included in the default node object, which really should not be a big deal adding. I guess I should add a patch for this, instead of going around the problem which is what I do and describe here.

To get a hold of this I had to call a ubercart specific function called uc_product_get_attributes function. This function takes a node id as parameter and return all an array of all the attributes related to the node. The array contain a set of attributes objects and these object contain all the information available on each attribute.

My solution was to call the uc_product_get_attributes function and get the default_option variable from the attribute object, see code example below.

  1. //get all attributes related to the node
  2. $attributes = uc_product_get_attributes($node->nid);
  3.  
  4. //get the id of default size of the product
  5. $default_size = $attributes[1]->default_option;

It is simple, but it took me about an 30 minutes to determine the problem and adding a solution. Hopefully this will save someone the job of solving the same problem.

Written by Kristian Lunde

February 20th, 2009 at 10:02 pm

Posted in Drupal,PHP,Programming,web

Tagged with ,

Flowplayer, https and the streamnotfound “problem”

with 4 comments

Lately I have been working on a project which used Amazon S3 to provide videos to Flowplayer on a website. This was working superbly until we added a link to a video using the https protocol. This broke the Flowplayer on Internet explorer 6 and 7 and Safari, and we got a:

  1. streamNotFound, clip: 'https://someurl'

Solution: Amazon S3 supports both http and https, so replacing https with http solved the problem. This problem probably occurs because the web browser is unable to cache the data from the https url and therefore the Flowplayer is unable to play the video.

Interestingly enough Firefox had no problem at all running Flowplayer and https urls.

Written by Kristian Lunde

January 16th, 2009 at 4:25 pm

Posted in web,web development

Tagged with ,

Get Adobe Flash playerPlugin by wpburn.com wordpress themes