Looking for a 'pick a-or-b' voting system script

Question

Apologies: this is my first time on stackoverflow and I'm starting with a question and seeking advice. Sorry.

Caveats: I know HTML and CSS pretty well. Javascript and PHP are not completely alien, but I'm really pretty basic on those. That said, I'm pretty sharp and willing to search for explanations independently.

Ok, so my question is this:

I want to create a site with a voting system very much like the one on kittenwar.com - the page loads 2 random images from a db of some sort and you click on the one you want to 'win'. Ranked pairs kind of deal.

Then there is a leaderboard of those images which have the highest win-loss ratio.

There also needs to be an uploader for peeps to upload their own images and have them go into an approval workflow, and from there into the db that feeds the voting thing.

I tried a pre-made solution ('photo battle') but found it was completely standalone, so trying to integrate it or change any of the options was a nightmare, plus it was buggy.

i'm sure there has to be a relatively easy way to do this, right? Ideally I'd like to build my site in Joomla and integrate this functionality somehow.

I'd be very grateful for any advice on this.

Thanks Tom

Answer 1

I've never used it but you could try... Image Rate

Answer 2

You could set this up "on foot", the application you envision is easy enough. However, given your current level of expertise, you'd still have a somewhat steep learning curve ahead.

So... here's how I would probably do it:

• Get a web server with PHP and a database server running.
• Set up a database. For starters, one table (name: "image"; fields: id, filename, count_up, count_dn).
• Create a page that shows two images at random, clicking on either one would re-load the page.
• Send the image ID a user clicked on via GET parameter, and the other ID in a second parameter.
• Upon click, increment the count_up for the one image, the count_dn for the other.
• Build a page that shows the leaderboard and one that allows the upload of images.

Challenges:

• Learn PHP well enough to do this (JavaScript is not really required for this app).
• Learn about the basics of HTTP (GET requests, headers, cookies).
• Learn basic stuff about databases and SQL.
• Make sure nobody can inject SQL into your queries by hand-crafting malicious parameters.
• Find a way to prevent application abuse though scripts.
• Make a public and a private part (staging/approval area) of the app, make sure nobody can sneak in by stealing cookies or making unauthenticated requests.
• Make sure nobody can inject code into your website (XSS attacks) - always HTML-escape any user-generated data that you output, avoid storing any HTML in the database.

You could also try and find a way of using an existing CMS for this task. The basic approach would stay the same, plus you'd have to learn the CMS itself.