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

Five Simple Tips to taking Better Photos

Friday, October 31st, 2008 | Cameras, Life, Photography | 1 Comment

As some of you may or may not know, I have a photography hobby. Because of this, I’ve been asked by a number of people to give some easy advice on taking better photos, specifically with Point & Shoot cameras. Now, I’m not a professional, just an amateur hobbyist, but I do know a few things you can do to improve your photos, even if you don’t have a fancy schmancy lens or expensive camera.

› Continue reading

Got to try a New Lens

Sunday, March 25th, 2007 | Cameras, Lenses, Photography | 2 Comments

Did a little photography with the cousins’ dog today. Got to try out a 100mm macro lens. This has convinced me to buy a Sigma Zoom Normal-Telephoto 55-200mm f/4-5.6 DC Autofocus Lens for Canon Digital EOS. I know it’s a little on the cost-effective side, but it has good reviews and should do me well for some portraiture and more action shots with the dog, provided I get a clear day. f-Stop starts at 4. I’d prefer 2.8, but I can’t shell out more money for a lens right now. If this lens doesn’t work out, I’ll just return it. Please look at my photos on flickr and leave me some comments.

Photobooth Flash

Monday, January 29th, 2007 | Design, Flash, Photography, Programming | No Comments

This might destroy my bandwidth but I whipped up this quick little guy tonight:

You can see it here

I noticed lightbox doesn’t load until this flash loads. Bah.

Homemade Photobooth using Photobooth

Saturday, January 27th, 2007 | Apple, Computers, Hardware, Life, Macbook Pro, Photography | 1 Comment

I made a photobooth last night for our party using my Macbook Pro, the built in iSight, a USB mouse, lots of duct tape and a sheet.

It was a huge success, resulting in 512 pictures. It was a lot of fun and I enjoyed making it.
Here’s how I did it

• I prepared my macbook by creating a managed account that could only open Photobooth
• I set my Macbook Pro atop my closet shelf
• I plugged in a USB mouse
• I used a ton of duct tape to put the mouse on the shelf’s hanger rack, and covered up the optical sensor
• I wrote “Press Here” on the left button
• I positioned the cursor on the “Take Picture” button
• I hung up a sheet around the area with tape
• I placed a lamp inside the enclosed area
• I encouraged everyone to use it

And the Results
Here are a couple of my favorites from the night:

Go see the rest of my 512 photobooth pics