A product website design and development

[Faun]

Hi, I am developing a product based website with user accounts and all that is necessary.

Using PHP, MySQL and JQuery.

Here are the few screenshots
*farm9.staticflickr.com/8155/7466112842_19776f51a5_o.png

*farm9.staticflickr.com/8153/7466112724_16d1bd16cf_o.png

*farm9.staticflickr.com/8018/7466112592_df0ccd5eed_o.png

*farm9.staticflickr.com/8159/7466113842_45a7102a46_o.png

*farm9.staticflickr.com/8149/7466113466_705e7e2270_o.png

Security, development and design suggestions welcome.

I'll be updating this thread with screenshots in progress as I proceed further.

 

[axes2t2]

Looking nice.

 

[Faun]

Thanks

Further updates on it:-

Add products:
*farm9.staticflickr.com/8292/7515227538_cb9d30500d_o.png
*farm9.staticflickr.com/8010/7515228350_2e7d4bee95_o.png

Validation for already existing SKU values using ajax, further validations for price and other fields:
*farm8.staticflickr.com/7272/7515399744_e296f1dce0_o.png


Show products:
*farm9.staticflickr.com/8162/7515228208_ab65f54cc4_o.png

Apply filter:
*farm8.staticflickr.com/7275/7515229014_7f23f3d247_o.png

Edit/Remove page:
*farm9.staticflickr.com/8431/7515228570_3637ed410b_o.png

Quick price change using ajax:
*farm9.staticflickr.com/8168/7515229350_73fe7fe14d_o.png

Edit more details:
*farm9.staticflickr.com/8023/7515229650_e13bf63ee9_o.png
*farm9.staticflickr.com/8004/7515229816_00aa3129de_o.png

Multiple deletion by selecting checkboxes:
*farm9.staticflickr.com/8142/7515227164_c4f9e403bd_o.png

Suggestions and critiques welcome. How can I improve the usability more ? And what other features or suggestions that can be implemented to make user experience enjoyable ?

 

[Mario]

Are you making a specialized CMS kind of thing for quickly generating a IT-product e-commerce site?

 

[Faun]

Are you making a specialized CMS kind of thing for quickly generating a IT-product e-commerce site?

I am just starting out after a long time.

It's kind of a simple CMS.

 

[JojoTheDragon]

Its cool.

 

[abhidev]

are you developing your own CMS or using some framework like joomla ?

 

[Faun]

Its cool.

thanks

are you developing your own CMS or using some framework like joomla ?

Everything is from scratch. Using php, jquery and usual html CSS stuff.

Sublime text 2 as the editor for everything. Firebug for handy CSS optimization and tweaking.

 

[Saahib]

Good work, hopefully you are enjoying it

Btw, using OOP in php or procedural concept ?

 

[Mario]

I am just starting out after a long time.

It's kind of a simple CMS.

Eh? If this is what you can make "just starting out after long", then I cant even start to think how good the final product would be in 6 months time!

What do you do professionally? Just curious!

 

[Faun]

Good work, hopefully you are enjoying it

Btw, using OOP in php or procedural concept ?

Procedural for now.

Eh? If this is what you can make "just starting out after long", then I cant even start to think how good the final product would be in 6 months time!

What do you do professionally? Just curious!

Thanks. I work in SAP, completely irrelevant.

 

[Faun]

Implemented rudimentary User Login and cart system. Used Session and Cookies for User login track and used Session variable for cart items track. This is getting interesting.
Implemented blowfish hash for password storing using phpass. Seems to be better than any other option.

Some pics.

What do you guys suggest to get Country, State and City automatically as a dropdown list ?
*farm8.staticflickr.com/7129/7545133392_34a11abf6b_o.png

*farm9.staticflickr.com/8156/7545133570_dc1331f7f5_o.png

*farm9.staticflickr.com/8146/7545133700_90d6e3a95f_o.png

*farm9.staticflickr.com/8425/7545132362_68710f33e0_o.png

*farm9.staticflickr.com/8421/7545133178_da96268b41_o.png

 

[Faun]

It's a product website with pages for administration part (adding, updating and deleting product parameters) and customer part (adding product to cart, checkout etc).

I am not concentration over design. It will be nice if you can suggest or perhaps provide some template for that.

 

[pranav0091]

Being able to search with multiple filters of the same kind (like having simultaneous filters for say 10k to 20k and 20k to 30k) that can be applied at the same time. I am not sure if thats clear enough, but how flipkart implements its search feature is NOT how it should be done. ( In flipkart, at any given time I can have only one price filter active like 20k to 30k. What if there is a product thats priced 30.4k? it does not appear within the search results. But in real life almost all people 'stretch' their budgets from time to time)

Also searching using sliders for 'price' is the most usable and useful form IMO.

 

[Mario]

Also searching using sliders for 'price' is the most usable and useful form IMO.

This. IMHO, the LG website has some kind of slider for price - ideal would be to have a slider as well as some kind of textbox for the user to enter his own price range.

BTW, why does Login and Register show if/when I am logged in? IMHO, I should be able to see Login and Register only when I am logged out or browsing as a guest.

Also, the form validation --> when I am registering and entering my email ID and password, I did like the validation to start "after" I have completed entering the full password, not right when I start - something like onblur or on unfocus whatever the javascript thingy was!
Sorry, if this does not apply in your case; is it Ajax-y by the way? Just curious, but how costly is it when you have say 10 mil email IDs already in your db? (Again, not too much (in fact, not at all) of a web geek, so question may not be applicable)

Oh and can you move the buttons (submit/reset) to the middle? Towards the left looks awkward!

 

[Faun]

Ahh don't bother about it...It's good enough..I can't provide templates as i don't know any..you could take a look at other templates and see if you find anything that looks more modern or contemporary.

Yeah, getting ideas from other sites.

Also searching using sliders for 'price' is the most usable and useful form IMO.

Will look into that. A really nice and user friendly idea. Thanks.

Here goes Cart facility, almost completed

The bare bone functionality:
*farm8.staticflickr.com/7251/7549863206_a720604200_o.png

*farm9.staticflickr.com/8165/7549863340_ae1bb3140f_o.png

*farm9.staticflickr.com/8012/7549863500_4204fc9448_o.png

Now, with little bit of CSS and database magick..grunt..grunt
Added items in cart.
*farm9.staticflickr.com/8432/7549863866_8b6465ab1c_o.png

After deletion of one item:
*farm9.staticflickr.com/8007/7549863694_6990ede31c_o.png

Updating quantity of item:
*farm8.staticflickr.com/7117/7549864050_90ae220aa3_o.png

Updated:
*farm9.staticflickr.com/8152/7549863014_29a82f10e9_o.png


Time for a break

This. IMHO, the LG website has some kind of slider for price - ideal would be to have a slider as well as some kind of textbox for the user to enter his own price range.

Yeah, this looks good.

BTW, why does Login and Register show if/when I am logged in? IMHO, I should be able to see Login and Register only when I am logged out or browsing as a guest.

See the current screenshots in this post. Logged in users wont see Login and Register.

Also, the form validation --> when I am registering and entering my email ID and password, I did like the validation to start "after" I have completed entering the full password, not right when I start - something like onblur or on unfocus whatever the javascript thingy was!

I am using onblur and onkeyup. Will see what fits fine there.

Sorry, if this does not apply in your case; is it Ajax-y by the way? Just curious, but how costly is it when you have say 10 mil email IDs already in your db? (Again, not too much (in fact, not at all) of a web geek, so question may not be applicable)

I am afraid I dont know what Ajax-y is. I am using ajax in few things, not the complete website.

Oh and can you move the buttons (submit/reset) to the middle? Towards the left looks awkward!

Yeah, will do. Thanks.

 

[Mario]

^^^ Very nice
By "Ajax-y" (read like an adverb) I meant, are you using Ajax in the part where you tell the user immediately that his email ID is already registered? And I wanted to know if that operation is a costly one in case you have to sift through say a large number like say 10 mil

 

[Faun]

^^^ Very nice
By "Ajax-y" (read like an adverb) I meant, are you using Ajax in the part where you tell the user immediately that his email ID is already registered? And I wanted to know if that operation is a costly one in case you have to sift through say a large number like say 10 mil

Yeah, it's ajax. Only the part where existing user id is checked during registration. Everything else is Client side JS validation.

Onblur will be efficient depending upon the hosting. As of now I have kept it on keyup and onblur.

It's highly unlikely that there will be 10 mil users active at the same time. It's just a start up website.

 

[Mario]

It's highly unlikely that there will be 10 mil users active at the same time. It's just a start up website.

Didnt get this! Why do you need all users to be active at the same time?
I meant, when down the line, you have say a high user base of say 10 mil, (so 10 mil IDs to check against), how much does the search cost?

Also, IMHO, isnt it better to have a button there ["Check for availability"] to make the validation a user choice? I mean, when the form submits, you will anyway validate the email ID as unique before you insert to the db, right?

 

[Faun]

^^that will require good infrastructure and code optimization. Can think of that down the line but as of now it should be good enough. Probably some performance testing can be done . I guess I'll look for the tools for that.

Sure, check for Availability is good and can be done but I have seen in some sites that the check is done automatically on input.