Designwaves Blog

Ruby on Rails – Static Pages

Brian — Sat, 23 Jul 2011 15:10:18 +0000

I have built an application recently but also wanted to integrated some VERY simple content management system (maybe an inline edit) for static pages on the marketing site. I saw a bunch of examples on how to do this but nothing really seemed to work for how I wanted to be able to tackle this problem. For starters, I wanted to be able to use other Rails Content and Models if I needed to display statistics or other Model info. I wanted to use the CSS and JS Packaging as well as layouts in Rails that I had already built. I also wanted to make the pages into subfolders for easier updating and organizing in the future, which plays into seo. Here is what I came up with to solve this issue. I hope it helps someone else as well…ENJOY :)

1) Rails Controller to handle the static page

This controller seems to be the general catch all for any file in any folder. The reason I set the path Param is so that we can use that to set the page name on the html body as a class

class PagesController < ApplicationController
  respond_to :html
 
  #Uncomment if you want cache caches_page :index, :show
 
  def index
    # Home Page Only = /
  end
 
  def show
    @path = params[:path] #Path Param (example /about/faq)
    template = File.join('public/pages', @path)    
    template_with_index = template + "/index"  
    render :template => template  #Normal File
    rescue 
         render :template => template_with_index  #if you had an index.html.erb file under a subfolder
    rescue 
         redirect_to "/404.html"
  end
 
end

2) Route

The route is a catch-all style route to be put after all other routes are listed

      resources :pages, :only => [:index, :show]
      match '*path' => 'pages#show'
      root :to => 'pages#index'

3) The Views and Layout

The updates to the views and layouts were to provide an easier way to write css

3) The Helpers

page_name is a helper method which will generate a variable based on the path params

module ApplicationHelper
 
  def page_name
    @path.parameterize('_') unless @path.blank?
  end
 
end

I felt this simple implement allows me to utilize all the beauty of Rails but doesn’t limit me to having to use public/*.html files, which isn’t easy to use when you already have layouts and styles. I thought about using some different gems to handle this but most seemed a bit overkill for what I wanted to do and this method was easier for me, in my opinion. I hope this helps someone else that is considering doing something like this as well.

Ruby on Rails – Easy date display

Brian — Sat, 20 Nov 2010 03:06:57 +0000

I have created this simple format_date method to format dates differently and put it in the ApplicationHelper. I know it isn’t something that is a super WOW factor but thought I would share anyways.

  def format_date(type, date)
    case type
      when :short_no_year 
        date.strftime("%b %d")
      when :short
        date.strftime("%b %d, %y")
      when :long 
        date.strftime("%B %d, %Y")
      when :long_day_of_week
        date.strftime("%a %B %d, %Y")
      when :default
        date.strftime("%m.%d.%Y")
    end
  end

to call in your view just use

<%=format_date(:long, crappy_date_from_db) %>

Ruby on Rails – Easy Navigation

Brian — Sat, 20 Nov 2010 03:04:01 +0000

This is primarily going to be a repost to some extent but would like to add a piece that I think will help even more. Based on http://www.cuberick.com/2010/05/simple-tabbed-navigation-in-rails.html I have added a simple regex that I think will help with the current status and be flexible to change on the fly if rules change.


<%= selected_navigation(:items) %>"><%= link_to "Items", items_path %>
<%= selected_navigation(:things) %>"><%= link_to "Things", things_path %>

and then add in the ApplicationHelper this simple code

  def selected_navigation(element)
    request.fullpath =~ /\/#{element.to_s}/ ? "current" : ""
  end

10 Favorite jQuery Tutorials and Plugins

Brian — Wed, 30 Jun 2010 17:29:17 +0000

I thought it would be appropriate to list out a handful of jQuery samples and plugins that are our favorite to use. jQuery is one of the most innovative javascript frameworks available today and we love to use it extensively on our projects, for ourselves and our clients. Here is a small list of samples and plugins that we love and we feel you will as well.

1) Slide Elements in Different Directions

A wonderful tutorial on how to make elements move on the page based on actions that you have performed. View Tutorial

2) jQuery Form Plugin

An excellent plugin that will easily allow you to submit your forms using jQuery and Ajax. View Plugin

3) Submit a form without Page Refresh

Another excellent forms tutorial that describes how easy it is to submit forms with simple javascript and html. View Tutorial

4) JQuery Curvy Corners

A nice script to turn elements into curvy corners. Until CSS3 is fully implements with border-radius, this is a fantastic alternative. View Plugin

5) JQuery Form Validation

Form validation is one of the biggest wastes of time to code from scratch, but is needed. It is much better to validate on the front end rather than submitting to the backend to minimize load on the server. This plugin is one the coolest and best I have seen. It is extremely easy to implement for any or all fields on your forms. View Plugin

6) JQuery UI Theme Roller

Even when using javascript libraries and plugins sometimes it can be very time consuming to add your own styles and themes. With the JQuery UI Theme Roller, it makes using the UI library much easier to integrate in your style to use common UI components.View Tutorial

7) Fancybox

If you are looking for a nice clean looking popup for displaying video, images, flash, etc. Then Fancybox could be what you are looking to use. This is one of the nicest and cleanest we have seen, and implementation is a breeze.View Plugin

8) Sliding Login Panel

A login panel can be really nice when it is hidden and only shown when you click the login button or link. In this example, it will show you how to implement a hidden panel that will slide down from the top of the page so you can get back some real estate on your page’s layout.View Tutorial

9) Popup Bubble

I have seen sites like Panic’s Coda where they have a really nice popup bubble when you hover over the downloads. I knew jQuery would make this very easy to do but found a tutorial that already explains how to do this.View Tutorial

10) Mega Drop Down Menus w/ CSS & jQuery

A really awesome tutorial on how to build a super clean drop down box as your menu bar.View Plugin

OK OK, I know I said 10 of our favorites but I had to add one more to the list.

11)Twitter Feeds with jQuery.

This has been one of the easier plugins to implement with jquery and love the way it integrates into Twitter. View Plugin

Configure Ruby on Rails, MacPorts and Apache Passenger – Development Environment

Brian — Thu, 17 Jun 2010 22:18:57 +0000

I started out by reading a bunch of articles on how to effectively set up a development environment on my Mac with Ruby on Rails, MacPorts and Apache Passenger. I started to find there were many different approaches on how to do this. I’m currently running MAMP for the development of websites for my clients, but couldn’t find the best approach for adding Ruby on Rails to my MAMP server. I tried a few different ideas but could never get the MAMP install to work with Ruby on Rails so I decided to set up MacPorts to a different ports (81) and run MAMP for PHP based web applications. I thought I would share my experience on how to set it up nicely on the mac running both ports 80 and 81 for different types of applications. Here’s how I did it!

1) Install MacPorts

Here are the instructions http://www.macports.org/install.php

2) Install Apache using MacPorts

$sudo port install apache2

You could decide to install MySQL, Subversion, Git, etc but for now those aren’t 100% important to getting up and running.

3) Update your user’s .profile

Update the export PATH with the apache2 line

export PATH=/opt/local/bin:/opt/local/sbin:/opt/local/apache2/bin:$PATH

Now we have a base Apache install with the path pointing to the Apache installed under MacPorts. You can run kick off the server and test it out at localhost.

$sudo apachectl -k start

4) Install the Ruby Components using MacPorts

$sudo port install ruby
$sudo port install rb-rubygems

5) Install Ruby Gems

$sudo gem install rails
$sudo gem install rake
$sudo gem install sqlite3-ruby
$sudo gem install mongrel

At this point, you should be able to go to the command line and type in and an application will be generated for you in a test app directory.

$rails testapp

If you cd into the testapp directory and type in

$script/server

and you should see this
=> Booting Mongrel
=> Rails 2.3.5 application starting on http://0.0.0.0:3000
=> Call with -d to detach
=> Ctrl-C to shutdown server

At this point you are not using apache, you are using the server that comes with the Rails Framework. It proves everything is installed correctly at this point and you can hit Ctrl-C to shutdown the server. Next,

6) Install Passenger Phusion

$sudo gem install passenger

7) Install Apache Passenger

$sudo passenger-install-apache2-module

8) Install Passenger Preference Pane

Now we have everything installed but the biggest issue we have now is how do you add the Ruby on Rails applications to the Apache Passenger installation. Well, thankfully there is a Mac Preference Pane that can be added to help add your applications quickly to Apache.

Once you have installed the preference panel, you should be able to drag the testapp folder from above to the panel and it will automatically add the correct configuration to the apache server. Just for good measure, restart apache ($sudo apachectl -k restart) and you should be able to hit http://testapp.local/ and your ruby on rails application will show up.

Welcome to Designwaves and Our Blog!

Brian — Mon, 07 Jun 2010 03:16:59 +0000

Today is the big release of our new cutting-edge technology company, based in Raleigh, NC, that specializes in Website Design and Development, Social Media Integration, Cloud Solutions, eCommerce, and Content Management Systems (We provide a whole bunch of other exciting services too, but you’ll have to check out the site to get the full Overview). Although today is our big day, I’m sure more people are excited about the new iPhone release than ours… well actually we’re pretty fired up about the new iPhone too!

Our team will utilize the blog to provide new and exciting educational content of how-to’s, innovative information, and helpful hints and tips. I hope that you will find our Blog an excellent technical resource that will be an asset to your company or your technical needs.