Scaffolding Twitter Bootstrap

Like so many other people at the moment, I’m using Twitter bootstrap as the basis for sites at the moment. I was playing around with the rails scaffold generators and wondered how easy it would be to customise them to generate bootstrap compatible views.

Turns out of course, it’s really easy!

The template files for the generators are in railties, so if you bundle open railties you can see what the defaults are. At the moment (railties v3.2.10) the files are at lib/generators/erb/scaffold/templates.  I use haml for view templates, which means haml-rails has put haml templates at lib/generators/haml/scaffold/templates.

To make the scaffolded files into exactly what you want,  just create your own versions in corresponding locations in your application.

My application layout places the yield inside a span12, so I can either start with another row, with spans inside the row, or directly with content.  I’ve ended up with templates that look like this:

As you might have guessed from the form I use simple_form – this provides generators for its forms anyway, but I’ve added the validates: true bit – this is for the client_side_validations gem. And the pagination block in index.html.haml will have indicated to you that I’m over-riding the controller generator – this has to go in lib/templates/rails/scaffold_controller/controller.rb – I’m adding the pagination for the index action, and load_and_authorise_resource for cancan in my version.

It’s possible to pass lots more options to the scaffold generator in application.rb – you can find out about them in the rails guide Configuring Rails Applications.

And what you end up with is a lovely scaffold generator that produces appropriate files for your application.  Makes scaffolding really useful again!

CAST, CONCAT and IF in rails select statements

I’ve been creating a feed for a legacy mobile app, which expects a json feed with a very different structure to what my new rails app produces.

Initially I was doing this using lots of ruby loops, but it quickly became apparent that this was far too processor intensive. So my alternative approach has been to dig down into the database layer and use some interesting MYSQL.

This is about the most compicated call I’ve had to use. As you can see it adds in extra fields, CASTs integers into CHARs, strips “static_images/” off the front of the image file name using SUBSTRING and CONCATs ‘/image/’ onto it. And finally, it uses an IF to decide whether to output the link_title or ” as the minitipTitle.

Online Training

I’ve been working on my second rails app, which is now up on a staging site – trainingstage.ntistudio.co.uk.

I’ve been working on this with my colleague, Edward Robinson. It’s been an opportunity for him to learn more about rails, and I’ve been using it to learn more about routes and about testing.

The application uses a lot of nested routes – deep and shallow nesting. It was interesting playing with these and learning more about how easy it is to configure rails routing.

We’ve also been using the twitter bootstrap gem to scaffold styles, to take advantage of the responsive design, typography and jquery features bootstrap provides.

mywellbeing.org goes live

The site that I have been working on since the end of October has now gone live – ogilvyeast.mywellbeing.org.

I’m really excited that it’s actually up and running. The new design looks really good, the front end is pretty much finished and the back end works. There are still bits of tidying up to do and then there are lots of extensions we still want to add to make the content even more flexible as we add new clients.

The site is really flexible – it serves different content depending on the subdomain, articles can be shown or hidden for particular subdomains, the frontpage can be customised, the logo and background logo can be different. We also have different user types, with different editing rights, so that our core content can’t be changed, but clients can add their own custom information.

We will be gradually moving current clients from the old system to the new one over the next couple of months.

Drag and drop in rails

As I said in my earlier post, the product I’m developing has lots of self referential links between articles. Now that I’m comfortable modeling them with has_many through relationships, I need to start thinking about how to build these links. I need to have a nice graphical back end, in which I can drag thumbnail images representing articles and drop onto another article to make a link.

Enter jquery draggable! There are some great tutorials on the web on jquery, particularly this one, but no really good ones on using jquery draggable with rails. It took me quite a long time to get this sorted out, especially as I was learning so many new things at once.

Continuing from the earlier article, I’ve added images to my articles – here’s my current schema:

On the show page, I’ve added graphical links to each of the article’s children:Drag and drop - show article page

The edit page is very similar, with a blank placeholder image to drag new links into and a list of all the articles that can be linked to:Drag and drop - edit article page

Here’s the code for the edit page:

The form is the same as normal, so here’s the edit_child_articles partial:

And the articles partial:

Now the clever bit is in the javascript. First of all as jquery draggable and droppable are in jquery ui, you must include that in the application:

Then in articles.js, I make the the article images in the list of all articles draggable, the empty box droppable and add a function to run when something draggable is dropped into the droppable box.

What does this do?

At the start; the make_draggable_and_droppable function makes the article images draggable and the empty placeholder image droppable and adds the drop_article function as the function to run when an article is dropped into the droppable space. The drop_article function creates a new link by doing a jquery ajax call to the links controller.

Now… When the drop_article function is run, the create.js.erb links view is called

The new link is hidden first, then slides into view.

If the delete link is clicked, the destroy.js.erb link view is called which hides the appropriate image.

The app is on github here and there’s a demo app on heroku here. For some reason it doesn’t always seem to work in google chrome, but does in any other browser.

Scopes in ruby on rails

Reading through Rails Recipes: Rails 3 Edition I discovered a much better way of doing my searches.

In my multi-domain application, articles belong to sites, sites have many articles. I was finding articles that belonged to particular sites by doing

It’s not too bad, but it gets a bit much writing out a lot of times.

Now, I’ve added a scope. In my article model I have

Then you can write

and get the same thing as before. Much clearer and also DRYer.

Summer Olympics 2012

My Database Design and Implementation module involved thinking about the organisation of the London Olympics.  First we modelled the data that would be needed.

Then we implemented parts of the system in Oracle Apex to produce a web accessible database.

The most complicated thing I made was a trigger that would check to see if an official already had something in their schedule 2 hours either side a new record in the schedule.

The finished web app allowed you to view a few reports I had created, including one official’s schedule.  It also allowed you to create and edit venues, events, officials, schedules etc.  I got apex to allow a drop down date and time picker, drop down lists of available venues and so on.

I got a distinction for this module.

Rails self referential has_many through

My first ruby on rails project is to redevelop the database, backend and frontend of an existing product. It is an information resource for staff wellbeing used by universities, nhs trusts and large companies. The resource consists of about 300 articles which are linked in a diagnostic “How are you today?” tree. This means a lot of the value of the application is in the links between the articles.

So my first task was to learn how to do self referential links between articles in ruby on rails.

To demonstrate how it works here’s a small demo app, just of articles and links. Here’s the schema – articles have a name and body; links have parent_id and child_id to make the links between articles and weight to enable sorting.

Here are the article and link models:

How does it work?

You make the links belong_to parent and child – both of class_name “Article”. This means you can refer to articles as parents or children.

Then in the article model, you make sure you set up the foreign key for the has_many, and the source for the has_many through the right way round:

parent_id is the foreign_key because child_links links from a parent to a child, and the article creating the link is the parent. Then the children come through this link (which is turned into the singular in the link model – rails is clever with all this pluralization stuff) as the source.

And visa versa with parent_links and parents.

Then in the rails console, if you create 2 articles id 1 & 2, you can do

and get Article 2.

to get Article 1.

Very useful once you get your head round it!

I’ve put a small demo app on github here.

A website for a primary school

As part of my Digital Media and Communications module for my masters degree, I built a website for a primary school.  I used drupal as I know it well and it expands easily.

I considered the different audiences that might use the site (parents, prospective parents and children) and made sure the front page had clear navigation to the information they might need.

There is a blog that could be updated regularly by the headteacher or support staff.

All content can be tagged by age group and subject to produce automatically built, expanding areas of the site for each subject and class.

There is also an art gallery and a calendar for the school.  The different parts of the site were put together using drupal modules – views; date & calendar; simplenews; lightbox; webform and several more.  Drupal is very adaptable and has loads of modules to extend its functionality.

I chose a theme that was suitable for a primary school – bright, colourful and clear.  It has a rotating image in the top bar to show off pictures children had created.

I got a distinction for this module.

Northern Ballet jquery carousel

For the Our People page on the Northern Ballet site I found and customised a jquery gallery carousel.  There are a lot out there, and after some testing of different alternatives the one I chose was jCarousel.

jCarousel has lots of customisations, such as vertical carousels or lightbox pop ups.  It seems lightweight and adaptable.

Northern Ballet - Our People