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










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:



Validation for already existing SKU values using ajax, further validations for price and other fields:



Show products:


Apply filter:


Edit/Remove page:


Quick price change using ajax:


Edit more details:



Multiple deletion by selecting checkboxes:


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.

[Ricky]

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 ?

[himadri_sm]

Can't comment on the coding stuff but the design looks good. It can be further improved though. What is the main purpose of the site- providing relevant information on products from different brands ?

[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.

[himadri_sm]

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

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.

[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:






Now, with little bit of CSS and database magick..grunt..grunt
Added items in cart.


After deletion of one item:


Updating quantity of item:


Updated:



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.

[Mario]

How long approximately is each module taking to code?

And when do you do this? Weekends? or 7 days a week?

[nbaztec]

^^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.

It's fine the way it is, the backend DBMS optimize queries under the hoods so if your `user_id` is indexed and unique the search time is negligible. The only scenario I think it could be significant would be if you were checking it on key events, which you aren't EDIT: Oh wait, you are. Use onblur or onsubmit.

...Or perhaps if someone maliciously polls the script to generate 1000 requests/second >_>

[101gamzer]

Looks Good & Cool

[Faun]

How long approximately is each module taking to code?

And when do you do this? Weekends? or 7 days a week?

Working for about a month over it. Reading documentation and thinking of how to implement takes some time but coding part is done pretty easily after that.

Working as and when I get time. Weekends usually BF3 multiplayer, so don't look at it much.

It's fine the way it is, the backend DBMS optimize queries under the hoods so if your `user_id` is indexed and unique the search time is negligible. The only scenario I think it could be significant would be if you were checking it on key events, which you aren't EDIT: Oh wait, you are. Use onblur or onsubmit.

...Or perhaps if someone maliciously polls the script to generate 1000 requests/second >_>

That can be done with onblur too. database requests are only for user id. So I guess leave it at onblur itself and remove the keyup.

Anyway to keep the throttling of database ?

Looks Good & Cool

Thanks.

[Mario]

...Or perhaps if someone maliciously polls the script to generate 1000 requests/second >_>

Anyway to keep the throttling of database ?

IMHO, any such use case would kill the network/app server long before it took down the db! Probably a function of connection pools!

Question should probably be "any way to keep the throttling of the web server"!
Well, we did never get DOS if there was some foolproof way of doing that!

[Faun]

^^yeah, likely.

Slight change is look and feel


Right side buttons:

[Mario]

Looks fine.
Can you change that X for the delete to something else? I know its functional, in fact, very functional. but looks slightly odd.

May be, a yellow pencil icon instead of the "Update" href and beside it a red x icon for delete.

BTW, how did you get that textbox rectangle to be rounded at couple of corners? Is that via CSS? Looks cool - the price, quantity and subtotal align are slightly off I think, would look cooler if it could be aligned at 180.


Edit: Just noticed the Proceed link. I think it should be a more prominent button, don't you think?
Where does Proceed go by the way? "Continue shopping" or "Checkout"? May be, two buttons with those names instead of Proceed?

[CyberKID]

The Design is nice. I noticed the SKU number. You seem to be entering the SKU number yourself. Wouldn't it be good to be using the Auto_Increment attribute of MySQL to generate unique SKU number for each product? That way, you'll be saving time entering a new product each time as SKU generation will be done under the hood.