RSS
 

Archive for the ‘Websites’ Category

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

18 Sep

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 :o rder
    • 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

 

My First Real-World Rails Project, Part II

20 Nov

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

 

Real World Rails Project, Part 1.5

10 Nov

This is design iteration 1.5 of my first real world rails project. Read part I here.

In this iteration I added drag and droppable table rows and a pricing table for the pricing page.

Since I haven’t figured out how to update the db with the new sort orders reflected after the drag & drop action, this is not considered iteration 2.

Enjoy:

http://screencast.com/t/9bBPFCF3xp

 

My First Real-World Rails Project part I

08 Nov

I’ve decided to make a video series of my first real project in Ruby on Rails. My love of programming has been rekindled by this amazing language. It’s very true Rails was developed for the new Web. The conventions and defaults built into the framework are true genius and make any project simple, fun and agile. I can respond to any change in scope at any stage of development and give my customers a competitive advantage.

I can truly value Customer Collaboration over contract negotiation now.

Enjoy:

http://screencast.com/t/rGDhWbVru

 

SEO for Enliven has been Successful

06 Oct

Bunmi told me recently that our sister company, Enliven Software, has been getting regular business and sales through online visitors who did a search on Google.

I’m proud of this, because I wrote the XHTML that’s been helpful in optimizing enlivensoftware.com for robots like googlebot to understand the site and return it high in the rankings for search results lists.

How did I do it?
 
Header tags, Title attributes and Cross-linking, oh my!

Use the proper hierarchy of Header tags in your code. On the home page, H1 belongs to your logo and company name. H2 belongs to the main headline of the page and maybe your company’s motto if you have one. H3 and H4 can be headers of sections, like News or Events.

On your subpages, make your logo/company name a regular anchor tag linking back to the home page. Now H1 goes to your page name and H2 becomes a sub-header for dividing content. H3 and H4 can still designate page sections. It helps if your H1 matches your Page Title

Then you should put titles on those tags and on your navigation menu links. Hell, you can even put titles on divs! These titles should differ from the text in the tag itself. For example, you could have a link named “Events” and its corresponding title could be “Calendar of Events at Company ABC”. This is cross-linking and keyword density rolled into one swift move without overloading the user with too much fluff in the words they see.

Also, a good friend of yours can be the ABBR tag. It’s the tag you use to define abbreviations. In a real-world example, here’s the code I used for the logo for the new MHSAA web site we’re working on:

<h1 id=”logo” title=”Michigan High School Athletic Association”><abbr title=”Michigan High School Athletic Association”>MHSAA</abbr></h1>

Now Google and other robots will know what MHSAA means. That should help in future searches. It also helps that their domain is mhsaa.com.< You can submit your sitemap to google and use webmaster tools and google analytics, as well.

So these are simple ways you as a programmer can help your company and clients succeed in SEO. Don’t forget that you should start with a kick-ass writer, too.

 

Cheap Web Companies are Ruining the Web

04 Dec

This is completely opinion and I didn’t do any research but I’m probably right in most cases. This is really me venting because I’ve been having more than enough run-ins with external companies who under-price our clients for “services” such as consulting or even developing systems that they can’t afford for us to do. Read the rest of this entry »

 

DotNetNuke and Search Usability

18 Nov

DotNetNuke recently added what they call a “feature” to their implementation of a search bar: the ability to search the web or search your web site.

This poses a couple problems:

  1. It can confuse users with unnecessary options
  2. It’s pretty meaningless.

Read the rest of this entry »

 

CFD Smile Goes Live!

12 Nov

Well, my first side project has finally gone live! After months of hard work, I now unveil www.cfdsmile.com to you. We wanted to bring out the services right up front for best emphasis, and lots of heavy stock photo usage for high impact.

We also worked with a professional web content writer to make the content more effective and search-engine optimized. This, coupled with semantic HTML, CSS, and google web master tools, will help this site rank high in keywords for Texas Dental Services.

So, please visit the site if you get a chance, and enjoy!

 

Online Chat Support: Provide a Phone Number as well

25 Sep

I’ve been working on a project for a client this week, trying to get their hosting account set up, and I have experienced a myriad of usability issues with their system. Read the rest of this entry »

 

Three Scripts I wrote for DotNetNuke Skins

13 Sep

I’ve been in email communication with the new Skinning Team Lead at DotNetNuke. I’m really interested in joining the DotNetNuke skinning team. I bring a pretty unique contribution to the scene, and I’d like to share it in the most appropriate outlet. So I’m talking to Timo to see if I can be useful on his team.

Until then, I’m going to share some scripts I wrote for DotNetNuke skins, which I also sent Timo in email.

Read the rest of this entry »