We often hit a problem with the admin menus in Magento.  Typically they stop working (no dropdowns) after we install the modern theme for Magento.  Today though we encountered it straight away on a fresh Magento install.

Fortunately the fix is straightforward:

1. chmod 755 the js/ folder, and folders within.
2. chmod 644 the javascript files inside js/lib/
3. chmod 644 js/index.php

Thanks to Proxy for pointing us in this direction.  He also recommends replacing a core head.php file; we’ve never found this necessary though, and the system works with just the file permission fixes.

We’ve used the Magento ecommerce platform for 3 projects recently, and I thought it would be useful to share the setup steps we go through for our Beanstalk + Versions + Coda web development environment.

About the development tools

Beanstalk is a hosted implementation of the SVN source code control. Versions is an SVN client tool on the Mac, and Coda is an editor and web publishing tool. Magento is a powerful ecommerce platform available in both Open Source and Enterprise editions.

Overview

We essentially go through 6 steps:

• Setting up the SVN repository in Beanstalk
• Setting up a working copy in Versions
• Committing the Magento download files to the repository
• Deploying the initial download files to the development server
• Setting up the database and configuring Magento
• Setting up the site in Coda

We can then begin coding our website.  I’ll take you through each of those steps in turn.

Setting up the SVN repository in Beanstalk

We store the code for all our website projects in Beanstalk SVN repositories.  In a large ongoing project, it allows us to develop and test new functionality independently of the main website.  We also use it for short ‘single hit’ developments, benefitting from the knowledge that our code is safely backed up, and we can easily revert to an earlier version should we accidentally delete or corrupt a file.

For a Magento ecommerce project, we create a standard repository in Beanstalk:

1. Choose the ‘create a repository’ button from the Repositories tab
2. Give the repository a name, e.g. My New Shop
3. Select all the default options (including ‘Create the repository from scratch… Create default repository structure’)

Setting up a working copy in Versions

Beanstalk holds our files and code securely.  Versions is the tool (SVN client) that lets us manage the files: uploading them to Beanstalk, downloading working copies to our local machine, and committing changes once we’ve finished our edits.

For our new online shop repository, we need to set up a working copy in Versions by:

1. Bookmarking the repository (choose the option to ‘create a new bookmark to a repository URL’)
2. We then select the trunk folder in Versions, and choose the checkout option
3. We are prompted for a local folder to store the working copy files in.  We have a folder for all our development projects, and create a folder for each project under there, e.g. development/mynewshop

At this stage the relationship between Beanstalk, Versions and our working folder has been established, but we’ve yet to load any files into the project.

Committing the Magento download files to the repository

At this stage, we take the Magento files from the download zip (on the Magento site), and copy them into our working folder (i.e. development/mynewshop).

Once the files have been added, we return to Versions, where we:

1. Select the files, and choose add (top right menu bar) to bring them under SVN control
2. Commit the files to the Beanstalk repository

Note: You have some alternative choices here.  Magento is a big system, with nearly 45MB of files.  We choose to  bring the whole download under SVN control, but you may prefer just to have your app/design, app/code and skin folders under SVN control.  You can find discussions of the pros and cons of this, in particular with reference to supporting future Magento upgrades, in other posts on the Internet.

Deploying the initial download files to the development server

We are now ready to deploy the Magento files to our development server, setup a database, and perform the initial Magento configuration.

Beanstalk has built in capabilities for deploying your website files to a staging, development or production server.  Due to the size of Magento, we’ve encountered timeouts problems using Beanstalk for the initial deployment of the files.

Instead, we use our standard ftp tool, Cyberduck, to transfer the Magento files to our development server.

Setting up the database and configuring Magento

With our files transferred to the development server, we then follow the Magento Installation guide (Default Install section), to set up the database and configure Magento.

Setting up the site in Coda

This is the final step in setting up our Magento web development environment.

To this point, we’ve set up our SVN repository in Beanstalk, created a working copy in Versions, established a folder for our local working copy, and committed the initial Magento download files to Beanstalk.  We’ve also deployed the Magento files to our development server, setup the database and configured Magento.

We then follow the standard procedure to setup the site in Coda:

1. Choose the ‘Add Site’ button from the bottom of the Coda Sites window
2. Enter the site name: My New Shop; the remote root: url of the development server; and the local root: our working copy folder (e.g. development/mynewshop
3. Enter the ftp connection details
4. Enable Source Control and enter the Beanstalk repository url, Beanstalk username and password

That’s it… Beanstalk SVN, Versions, Magento and Coda are all setup, and we are ready to start the development and skinning of our Magento ecommerce web site.

Our web design and development process has evolved to include a very powerful suite of tools that let us build rich websites quickly and efficiently.  In this post, I share some insights into the tools and how we use them.  Hopefully, you’ll find some new software to explore; I look forward to hearing your thoughts.

Coding and standards

XHTML and CSS are the cornerstones of our web development, with PHP and MySQL for our server side scripting and database work.  Before a website goes live, we test it for standards compliance using the W3C validators.  We want our websites to work across different browsers with less problems, and standards compliance helps ensure that.  It also gives us some search engine optimisation and disability discrimination pointers.

Most of our websites have rich interfaces and effects built with Javascript (typically using the jQuery libraries).  The sites we are building for Concept Eye Clinic are great examples of  jQuery enhanced websites.

Our graphic designer, of course, uses the ubiquitous Photoshop to create our site layouts and design previews.  Something about the ‘developer aversion to Ps’ in me, sees Fireworks being snook out occasionally to tweak graphics.  I’m getting over it.

Content management

Almost all our sites are built using the WordPress platform for content management.  We  worked with Expression Engine for one project, when we needed friendlier image handling for the client, but have returned to WordPress since.  We know the platform well, and are comfortable extending it to meet most website needs.  We’ve used WordPress to build everything from simple  brochure sites to full blown online magazines.  I’m also keeping an eye on RadiantCMS for a future development.

We undertook a couple of ecommerce projects a while back, and have had a surge of them arrive recently.  For all three of the new projects we are using Magento.  Magento is more than a little intimidating out of the box, with a powerful but complex set of XML and PHP files for layout and templating.  The documentation, including text books, is often poorly written, but a very active Open Source developer community means ‘how to’ solutions for just about any problem are only a Google away.

Last but not least, we’ve used BuddyPress for social network developments, including the acclaimed Hello Eco Living website.  We considered Elgg as a social network development platform, but opted for BuddyPress because of our familiarity with the underlying WordPress system.  BuddyPress has been an adventure.  It’s feature rich, but definitely went through teething problems during its first year.  Serious development requires far more knowledge of filters and event handlers than you’d expect to encounter developing standard WordPress themes.  That, coupled with a much smaller market, means the number of skilled developers and shared knowledge is limited.

Development tools and environment

We develop on Mac, using the Coda web development environment to hand code our websites.

MAMP Pro gives us a full featured Apache / MySQL / PHP local test environment, and we use Versions in conjunction with Beanstalk to manage our code.  Beanstalk is a hosted source code control system (subversion SVN), that lets us track revisions to our websites, build and test new features independently, and integrate back into the main site.  Coda can function directly as an SVN client, but we prefer to use it in combination with Versions.  We use Versions to create test branches, create working copies of a website, and set up our local file structure.

Finally, we use Safari with its developer tools enabled as our main development browser.  The developer tools offer a similar set of functionality to Firebug on Firefox, allowing us to examine our HTML / CSS / Javascripts and resource usage in the browser.

This post has given a quick overview of the tools we use in our web design and development process.  I’ll delve into more depth on some of them in future posts.