Joe Sak

Online Photo Gallery, Payment & Order Fulfillment: Ruby on Rails Tutorial

Friday, September 18th, 2009 | Custom Development, Improving Code, Photography, Portfolio, Programming, Projects, Ruby on Rails, Tutorials, Web Development, Websites | 4 Comments

This post is a follow-up to the post on my personal blog, titled “Ruby on Rails Photo Gallery & Shopping Cart with RESTful Authentication” In that article, I merely showed off what I’d done with Ruby on Rails, but I didn’t show anyone how. Well, I’ve gotten some comments from people asking me to show them how to build it.

That’s what this post is for.

So on to the nitty gritty details.

Start with the RESTful Authentication Tutorial:

Follow the README to install, but READ THIS FIRST to fix the ExceptionLogger error Then follow these instructions to fix the OpenID plugin error Make sure you get your recaptcha keys for the config.yml, otherwise failed login attempts will bust your application. Fill out the config & database.yml files accordingly, run your database create & migrate rakes, fire up the server and make sure it looks good. Cool? Let’s move on: Define the objects Let’s begin by pointing out what, exactly, we’ll be building this application around: Galleries of Photos that Customers can order with a private Account provided to them by an Admin who can manage the galleries and review the Orders, which are also available to their respective customers. I will go through how to set up the following models like so:

• Galleries
  • has_many :photos
  • belongs_to :customer
  • title
  • acts_as_urlnameable (pretty URLs)
• Photos
  • belongs_to :gallery
  • paperclip attachment: image
• Customers
  • username, password, full name
• Orders
  • has_many :line_items
  • belongs_to :customer
• Line Items
  • belongs_to :order
  • quantity, size, price

So let’s build the Galleries first:

Then edit the Gallery model:

That’ll be fine for now. Let’s add the Photos model with paperclip image attached:

Now edit the Photo model as such:

You should read all about the paperclip gem if you need more info on this model. Basically, we’re telling it to allow image attachments to the Photo model. Customers can be the RESTful Authentication Tutorial User model, just need to add a couple things here:

Let’s worry about Orders and Line Items later. We’ll have to add a cart, too. I’ll cover it, but it is all derived from Agile Web Development with Ruby on Rails Third Edition

Run your rake db:migrate and confirm all is well. Delete the Galleries layout file so it uses the application layout.

Let’s go see http://localhost:3000/galleries and play around. Add a gallery and then go to edit it. This is where we’ll add SWFUpload. Follow Jim Neath’s advice for this.

You’ll want a photos controller:

The create method I use is:

I had no luck getting Jim Neath’s session fix working, so I put skip_before_filter :verify_authenticity_token in the Photos Controller. Bad? Yea, probably. I haven’t found a better way yet.

Add this code to app/views/galleries/edit.html.erb:

Which leads you to add the following partial: app/views/photos/_image.html.erb

We’ll worry about the destroy link later, let’s integrate swfupload. Download the latest copy of SWFUpload. Copy flash/swfupload.swf to public/flash (make directory first). Copy swfupload.js & upload.js (in Jim Neath’s demo app) to public/javascripts. Copy Jim Neath’s swfupload.css file to public/stylesheets. Copy Jim Neath’s images/icons folder to public/images.

Add this code to app/views/galleries/edit.html.erb:

Yep, a lot is going on there. Reload your galleries/edit page and see if it’s still working :)

Ok, so this gets you to a functioning online photo gallery. Up next will be adding user accounts, a shopping cart, ordering options, customers & paypal integration. Stay tuned!

For now, please find the source here: http://github.com/joemsak/proofs_package

And for help on your project, visit us at http://www.simplifyadvance.com

Tags: ecommerce, photos, Portfolio, Ruby on Rails, tutorial

Ruby on Rails Photo Gallery & Shopping Cart with RESTful Authentication

Sunday, May 31st, 2009 | Design | 7 Comments

Tonight I launched another web application for Michael Youngblood Photography which allows him to build online photo galleries that his customers can privately view and order online with qty, size and framing options. The customer must use paypal to complete the transaction (because I’m still a rails n00b, guys. no serious SSL stuff for me yet).

So I grabbed the RESTful Authentication Tutorial as my base framework for the application, so I automatically had user accounts, roles, logging in and session stores to work with right off the bat.

I’m very proud of this application from a knowledge/skill expanding aspect, a UI aspect, project complexity, and the fact that I was careful to write this in “The Rails Way” as strictly as possible. Remember guys I’m still a n00b but I’m coming along. Enjoy!

Demonstration of the User Interface process and application

What I had to add on to it was the ability for Michael to create galleries which belong to the user accounts he creates in the process.

So he begins by creating a customer:

Michael begins by creating his customer

Then he names the gallery:

Michael names the gallery

Then he populates the gallery with photos:

Michael uploads photos to the gallery

This is what the customer sees when they log in (minus the edit gallery link, only admins see that)

The customer interacts with their gallery

*note, the “Add to Cart” gray bar is triggered by mouse hover.

They can add to cart:

The customer adds an item to their cart

After completing the checkout process in paypal, the user can see their order list, and Michael can access their order list directly off their private user page.

To see the full demonstration, check out my Jing! Screencast here:

View the 5 minute Screencast Demonstration

*note -> the photo uploads actually work much better and without wonkiness on the production server!

If you’d like to get your hands on the source, or would like to work with me, please contact me.

Lansing Sports given Outstanding Web Site award by NASC

Wednesday, April 29th, 2009 | Design | 1 Comment

Lansingsports.org, one of my favorite projects as a web developer for Artemis Solutions, was given the award for Outstanding Web Site by the NASC. I don’t have proof because no one is blogging or writing about it, but @greaterlansing says so, and they’re the ones who got the award, so I’ll trust them. Especially since they seem to like working with me.

LansingSports.org

Stop those damn AIM coho, trout & salmon bots!

Friday, April 10th, 2009 | Design | 4 Comments

AOL Instant Messenger. Y’all are using it.

You randomly get an IM from <adjective>coho or trout or salmon. It’s nonsensical but you reply to it out of curiosity. Then you find out the person on the other end is some random AIM user. It’s annoying as all hell. Your block list is probably long, and it doesn’t even matter because it changes its name every time!

HOW DO YOU STOP THE DAMN AIM COHO BOTS?

Thanks to some info from Morouxshi, it’s actually really easy to stop the bots:

When that stupid thing IMs you respond to it with

$optout

It will ask you to respond with something like ‘$optout blah’ and once you do that it will stop sending you IMs.

Some known AIM bot names (to help with people searching this problem):

• clingycoho
• sinistercoho
• surefootedcoho
• toroidalcoho
• passedoutcoho
• racingcoho
• bipolarcoho
• ingeniouscoho
• analyzedcoho
• merrycoho
• bisexualcoho (haha what?)
• nieceofacoho
• witchycoho
• welltimedcoho
• infuriatedcoho
• puritanicalcoho
• fiercetrout
• dramaticcoho
• swabbedcoho
• brunchingcoho
• xenophobiccoho
• stupendouscoho
• alchemicalcoho
• lopsidedcoho
• varyingcoho
• roudingcoho
• immoveablecoho
• cateredcoho
• lilliputiancoho
• falsifiedcoho
• affectionatecoho
• liberalcoho

Organize yourself with Ta-Da lists

Friday, December 12th, 2008 | Design | No Comments

The geniuses at 37signals have been offering their free Tada List service for a number of years now, but I only recently started using it. Absolutely pleased with Basecamp, I had no doubts it would be a useful web site.

Boy was I ever right. Tada List makes it so easy to stay on top of your game and your tasks. With so many bloated task managers out there, it’s nice to have a simple list that I can add to, edit, and re-order to prioritize. It’s awesome that it’s free, as well.

Thanks, 37signals!

Also, putting your dinner dates into iCal isn’t nerdy in any way, shape, or form at all.

Tags: 37signals, manage, prioritize, task lists, to-do

My First Real-World Rails App, Part IV

Wednesday, November 26th, 2008 | Design | 3 Comments

Continuing my series about my first real-world ruby on rails application, I’m posting my 4th screencast, where I demonstrate the front facing Photo Gallery.

Enjoy!

View the Screencast now

My First Real World Rails App, Part III

Monday, November 24th, 2008 | Design | 1 Comment

Continuing my series about my first real-world Ruby on Rails application, I’ve added a very simple photo gallery management tool to the Admin side of the app:

Enjoy:

Watch the Screencast now

My “Functional Requirements” documentation

Sunday, November 23rd, 2008 | Design | 1 Comment

For my first real world Rails Application:

Who needs 'em?

There’s no need to have anything more elaborate than this. Rails lets me respond to change! I have a general outline because I know the little things will come up as I work! I am able to make decisions quicker because Rails allows me to try several ideas in minutes! If I spelled every detail out painstakingly in some arduous document, I’d get bogged down with heavy commitments and feature creep. Having a rough outline allows me to focus on the core ideas of the application and make judgement calls while I work.

My First Real-World Rails Project, Part II

Thursday, November 20th, 2008 | Code, Custom Development, Programming, Projects, Ruby on Rails, Web Development, Websites | 2 Comments

Continuing my series on my first real-world rails project, I’ve made some great advancements.

Using attachment_fu, following Mike Clark’s Tutorial for Uploading / Resizing images in Ruby on Rails, and Rmagick with ImageMagick, I was able to add Categories functionality with featured images.

I also used lightbox and Coda Slider for Admin & Home presentations, respectively.

Enjoy!

http://screencast.com/t/Jli6m3lzL

A jQuery Function to Auto-Fill Input Fields and Clear them on Click

Wednesday, November 19th, 2008 | Design | 29 Comments

***UPDATE 1/27/2010: I have created a github repository for this plugin, and added password field support! ***

Download the plugin here.

Original post which needs to be updated to reflect the changes in the plugin (but the idea is the same):

So you’ve got some input fields, maybe a search bar, or a name field, an email field, whatever. You’d like it to be smooth and show the required info in the field, and have it clear when your customers focus on it. How slick would that be? Well, I have written 12 lines of jQuery that will make your forms even sweeter.

Let’s start with the basics.

First, you need jQuery. I recommend linking the Google-hosted jQuery script, as this may someday help optimize your web site. The idea is that if enough people are using the hosted libraries, then there’s a good chance that your visitors have already cached the file, helping your site load faster.

Next, you need a javascript file for holding all your functions and making calls to those and the built in jQuery libraries. I call mine “functions.js”. So create that and link it after your jQuery script:

     <script src="http://www.google.com/jsapi"></script>
	<script>
		google.load('jquery','1.4.1');
	</script>
     <script src="js/functions.js" type="text/javascript"></script>

In your HTML, you need an input field. Let’s use a search box for our example.

     <input id="txtSearch" type="text" value="Search for Keyword(s)" />

Here we will get a standard textbox with the words “Search for Keyword(s)” in it. Now, we could write a function that clears the text when the user clicks, and it would be very easy, like this:

     $("#txtSearch").click(function(){ $(this).attr({ value: '' }); });

We’re presented with a few problems, however:

1. The value won’t clear if the visitor doesn’t have JavaScript enabled.
2. It only works “on click”. What if the user tabs to your field? Use “on focus” instead.
3. The value will clear even if the visitor typed their own text in already. This violates the usability rule that you should always preserve users’ data.

 <input id="txtSearch" type="text" />

Now let’s modify our JavaScript to add the default value, and clear it when clicked, but only clear if the default value is in the field.

     $("#txtSearch").attr({ value: 'Search for Keyword(s)' }).focus(function(){
            if($(this).val()=="Search for Keyword(s)"){
               $(this).val("");
            }
       });

Now we have a search field that gets a default value and clears when the visitor brings focus (through click or tabbing) to the field, but only when the default value is found in the field.

So, what if the visitor tabs through to the next field and forgets what the newly empty field was for?

Did you really think I’d leave this detail out? It’s simple. We add a function to re-fill the field with our default value on blur if the current value is found to be empty:

      $("#txtSearch").attr({ value: 'Search for Keyword(s)' }).focus(function(){
            if($(this).val()=="Search for Keyword(s)"){
               $(this).val("");
            }
       }).blur(function(){
            if($(this).val()==""){
               $(this).val("Search for Keyword(s)");
            }
       });

So can this get any better? You bet! We can make the default value have a lighter text color and give the visitor input a darker color. We can also turn this into a function so it can be applied to any field in our DOM! Let’s do it!

function autoFill(id, v){
	$(id).css({ color: "#b2adad" }).attr({ value: v }).focus(function(){
		if($(this).val()==v){
			$(this).val("").css({ color: "#333" });
		}
	}).blur(function(){
		if($(this).val()==""){
			$(this).css({ color: "#b2adad" }).val(v);
		}
	});

}

Just pass the ID of the field and the default value you want it to have:

     autoFill($("#txtSearch"), "Enter Search Keyword(s)");

That’s it, now go check out the demo and feel free to copy!