# A product website design and development



## Faun (Jun 29, 2012)

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 (Jun 29, 2012)

Looking nice.


----------



## Faun (Jul 6, 2012)

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 (Jul 6, 2012)

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


----------



## Faun (Jul 6, 2012)

Mario said:


> 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 (Jul 6, 2012)

Its cool.


----------



## abhidev (Jul 7, 2012)

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


----------



## Faun (Jul 7, 2012)

JojoTheDragon said:


> Its cool.


thanks



abhidev said:


> 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 (Jul 7, 2012)

Good work, hopefully you are enjoying it 

Btw, using OOP in php or procedural concept ?


----------



## Mario (Jul 7, 2012)

Faun said:


> 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 (Jul 7, 2012)

Ricky said:


> Good work, hopefully you are enjoying it
> 
> Btw, using OOP in php or procedural concept ?


Procedural for now.



Mario said:


> 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 (Jul 11, 2012)

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 (Jul 11, 2012)

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 (Jul 11, 2012)

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 (Jul 11, 2012)

pranav0091 said:


> 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 (Jul 11, 2012)

himadri_sm said:


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



pranav0091 said:


> 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 



Mario said:


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



Mario said:


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




Mario said:


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




Mario said:


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



Mario said:


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


Yeah, will do. Thanks.


----------



## Mario (Jul 11, 2012)

^^^ 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 (Jul 11, 2012)

Mario said:


> ^^^ 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 (Jul 11, 2012)

Faun said:


> 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 (Jul 11, 2012)

^^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 (Jul 11, 2012)

How long approximately is each module taking to code?

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


----------



## nbaztec (Jul 11, 2012)

Faun said:


> ^^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 (Jul 11, 2012)

Looks Good & Cool


----------



## Faun (Jul 11, 2012)

Mario said:


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



nbaztec said:


> 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 ?



101gamzer said:


> Looks Good & Cool


Thanks.


----------



## Mario (Jul 12, 2012)

nbaztec said:


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





Faun said:


> 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 (Jul 13, 2012)

^^yeah, likely.

Slight change is look and feel
*farm9.staticflickr.com/8285/7557527844_56f32c4952_o.png

Right side buttons:
*farm8.staticflickr.com/7258/7557589106_a680a65c0b_o.png


----------



## Mario (Jul 13, 2012)

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 (Jul 13, 2012)

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.


----------



## Faun (Jul 13, 2012)

Mario said:


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


here, looks good. Though I am not doing theming yet but once in a while gets bored of coding and resorts to CSS.
*farm9.staticflickr.com/8158/7561789922_016f192b97_o.png



Mario said:


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


Yeah, used CSS. Will not work with crap internet explorer. Will have to hack CSS separately for that.



Mario said:


> 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?


[/quote]
It just displays the shipping address below the cart with animated scroll to get it in focus.

I havent implemented that functionality completely. Some areas, I have to think about.



CyberKID said:


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


SKU is chosen because it will be convenient and there wont be problem of duplicate product entries. Also, a quick check is done for already existing SKU in database while entering SKU in the field.

I guess it's better this way than incrementing automatically a number.


----------



## Mario (Jul 14, 2012)

Faun said:


> here, looks good. Though I am not doing theming yet but once in a while gets bored of coding and resorts to CSS.


Great! The alignment still looks a bit off though!
Move the red cross beside the update?? Dunno, maybe better this way!




Faun said:


> Yeah, used CSS. Will not work with crap internet explorer. Will have to hack CSS separately for that.



Ugh! Don't even get me started on stupid IE! 
Not only IE, a few days back I wrote a piece of code to generate reports formatted using CSS3 to be displayed in Outlook. Guess what? It worked in Outlook 2000 and 2003 and got completely screwed out of place in Outlook 2007/2010 - A google search revealed tons about how bright the folks at MS are! 
Complaints to MS result in stupid answers like this one!

And this image just about sums up my story!


----------



## nbaztec (Jul 14, 2012)

Mario said:


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


 
I was just jesting with that, Sheesh. 

And there's nothning *you* can do about DoS/DDoS attacks rather the web server should/ought/might be the one checking of packets for floods (ineffective in case of DDoS). The only thing you should be worried is that *you* aren't overwhelming the DBMS with queries on key events when you have someone like @ico typing at ~ 90wpm. (Not specific to your project, but in general).


----------



## Mario (Jul 14, 2012)

nbaztec said:


> I was just jesting with that, Sheesh.
> 
> And there's nothning *you* can do about DoS/DDoS attacks rather the web server should/ought/might be the one checking of packets for floods (ineffective in case of DDoS). The only thing you should be worried is that *you* aren't overwhelming the DBMS with queries on key events when you have someone like @ico typing at ~ 90wpm. (Not specific to your project, but in general).



Ico types at 90 words per minute?????  I think the max I ever hit must have been around the low 80s in my college days! which was of course a one-time thing!
@Ico, upload a video of you typing!  (Reminds me of Adnan Sami for whatever reason!)

[Anyway, 90 wpm is not gonna crash any db worth its salt! ]

@nbaztec
BTW, what were you testing with?
LOIC? 
IMHO, from what I have seen, IDS/IPS systems are epic fails! Some even try to chase back to identify the attacker(s) (and confirm things in the process! How stupid is that! )


----------



## nbaztec (Jul 14, 2012)

Mario said:


> [Anyway, 90 wpm is not gonna crash any db worth its salt! ]


Think a thousand ICOs (Yes it's disturbing as well)



Mario said:


> @nbaztec
> BTW, what were you testing with?
> LOIC?
> IMHO, from what I have seen, IDS/IPS systems are epic fails! Some even try to chase back to identify the attacker(s) (and confirm things in the process! How stupid is that! )


I was jesting not testing 
LOIC is a fairly simple concept, nothing much complex, it's however the simplicity of it that catches my fancy. As for IPS/IDS, you can't blame 'em really. It's the very nature of IP that makes the task difficult for them. But that doesn't mean it's impossible or that they are epic fail. A trivial DHCP server log can uncloak you  But given the fact that the laws of foreign lands rarely cooperate, it's a laudable practice - I'd give you that.


----------



## Mario (Jul 15, 2012)

nbaztec said:


> Think a thousand ICOs (Yes it's disturbing as well)


Well, if you lined up a 1000 ICOs, I guess I will line up a RAC! 



nbaztec said:


> I was jesting not testing
> LOIC is a fairly simple concept, nothing much complex, it's however the simplicity of it that catches my fancy. As for IPS/IDS, you can't blame 'em really. It's the very nature of IP that makes the task difficult for them. But that doesn't mean it's impossible or that they are epic fail. A trivial DHCP server log can uncloak you  But given the fact that the laws of foreign lands rarely cooperate, it's a laudable practice - I'd give you that.



Didn't get the part about "laws of foreign lands"...
But in my experience, a flawless IDS/IPS or even an IDPS seems utopian and unreal! An IDS tells me an attack is in progress, when, how, etc. And expects me to do something about it - meanwhile, I am losing business by the minute! An IPS generates too many false positives (disconnects valid business - my loss again) and is a little too easy to fool (!?! suspect the AV and Network Security Industry guys want it to be that way?! - anyway, reading signature patterns or reading load patterns is hardly an intelligent way to deduce an "attack" - have seen too many instances of peak load, line noise setting off an IDPS)... Both sit on my network and eat resources - its like I have to grease the greedy policeman to keep the extortion gangs out!

If I must do all of that, why can't I instead draw out a contract with my ISP, tell them to install a BFF (thats a Big F***ing Firewall ) on their end (don't see the logic behind a downstream firewall - if the bloody little rascala packets have to reach my downstream firewall to get blocked, why, they have already won half the war by clogging my lifeline to my ISP), configure it with some strict rules and maybe, use a IDPS to simulate an attack just to harden my rules (and then get rid of it) and then sit back and pray that someone with a big honeypot does not want to pawn my a$$?

It would still not mean 100% security (not like the IDPS would guarantee that either), but I got rid of resource hoggers and applications that sometimes like to chase back and confirm that the port the attacker suspected is open IS actually open!

The only advantage I can see an IPS might hold is that it will trigger even when the attack originates from inside my network! But I guess that is easily taken care of by architecting the network properly in the first place and having a second BFF *inside* the DMZ.

I guess I am just trying to say, if the very nature of IP makes a IDPS fall short of what it must do (or at least is expected to do), why use it in place of something which would let me do kind of the same thing with lesser resources and better accuracy! Granted a DOS would leave its marks on my logs, but the idea is to save my a$$ (my business), not sue people later on to recover the losses.


----------



## nbaztec (Jul 15, 2012)

Mario said:


> Well, if you lined up a 1000 ICOs, I guess I will line up a RAC!
> 
> 
> 
> ...



I totally agree with you. While these systems can pin-point the attack location and in rare cases nab the culprit, but the damage caused by false positives and the overwhelming requests is the only thing that matters. And you are spot on with the downstream firewall rules as well - DoS will clog it.

The idea of BFF is a nice alternative since the packet must be dropped before it is switched thus minimizing resource wastage. The best bet would be to implement something on the lines of TCP's congestion control that would travel upstream to update the routing tables of switching points, but HTTP and TCP are as similar as apples and oranges. HTTP is inherently connection (and state) less, maybe HTTPS can implement something like that but that would mean compromising efficiency, simplicity and performance of HTTP.

And l meant that countries rarely cooperate in exchanging information, if a Chinese IP is detected DoSing Indian servers, I sure a hell doubt the Chinese government would reveal the DHCP logs to identify the culprit, which for all they know, might be a proxy through a proxy.


----------



## Mario (Jul 15, 2012)

@nbaztec

Dude, I was kinda presuming you work in Network Security and then I hit your site - holy cow! what are you, the Ankit Fadia we haven't heard of yet?!!? 

Anyway, we can safely conclude, that we have pretty much DDOS-ed Faun's thread here!


----------



## nbaztec (Jul 15, 2012)

Mario said:


> Dude, I was kinda presuming you work in Network Security and then I hit your site - holy cow! what are you, the Ankit Fadia we haven't heard of yet?!!?


Lol no, I'm totally 100% unemployed. 



Mario said:


> Anyway, we can safely conclude, that we have pretty much DDOS-ed Faun's thread here!


Apologies, Faun. We'll bow out now.


----------



## Faun (Jul 16, 2012)

lol...a lot happened here guys 

Ok, now the next step is to integrate paypal with the website. If I put up the value of amount in hidden field then it can be changed very easily by tampering the http header.

Has anyone got some experience with that ? What should I do ?


----------



## gopi_vbboy (Jul 16, 2012)

Faun said:


> lol...a lot happened here guys
> 
> Ok, now the next step is to integrate paypal with the website. If I put up the value of amount in hidden field then it can be changed very easily by tampering the http header.
> 
> Has anyone got some experience with that ? What should I do ?



Yes never use hidden fields for posting critical data, as it can be manipulated.

Always code business logic in php code behind and not front end js.

Better add dual validations on server side and client side.


----------



## nbaztec (Jul 16, 2012)

Faun said:


> lol...a lot happened here guys
> 
> Ok, now the next step is to integrate paypal with the website. If I put up the value of amount in hidden field then it can be changed very easily by tampering the http header.
> 
> Has anyone got some experience with that ? What should I do ?



Use Paypal's own code, IIRC they have a get request header.


----------



## Faun (Jul 16, 2012)

gopi_vbboy said:


> Yes never use hidden fields for posting critical data, as it can be manipulated.
> 
> Always code business logic in php code behind and not front end js.
> 
> Better add dual validations on server side and client side.



Yeah, doing final validations at server side.



nbaztec said:


> Use Paypal's own code, IIRC they have a get request header.



Not able to find that. Will try at home.


----------



## nbaztec (Jul 16, 2012)

Faun said:


> Yeah, doing final validations at server side.
> 
> 
> 
> Not able to find that. Will try at home.



This one


----------



## Faun (Jul 18, 2012)

^^it's at a standstill. I'll have to read it at a stretch, may be later.

Here some screenshots of a side project, client side and server side validation:
*farm9.staticflickr.com/8287/7597975566_10a2e075f1_o.png

*farm8.staticflickr.com/7114/7597975146_434cb69c44_o.png


----------



## Faun (Jul 20, 2012)

So, I was bored today and instead of coding did some theming.

How it looks now ?
*farm9.staticflickr.com/8152/7609367866_ce8cc7f65b_o.png

*farm8.staticflickr.com/7251/7609368334_0729eae649_o.png

*farm8.staticflickr.com/7274/7609367020_2e3551f28e_o.png

*farm9.staticflickr.com/8292/7609368832_e907138193_o.png

*farm8.staticflickr.com/7272/7609421066_7e8515144a_o.png


----------



## krishnandu.sarkar (Jul 20, 2012)

^^That's awesome


----------



## Mario (Jul 20, 2012)

Looks *very neat* - bit boxy, especially when you have lots of text boxes (just being honest).. and the block letters in show cart don't look too good in the screenshot - may be because of the dimensions of the screenshot itself, not sure how it looks on the monitor.


----------



## mrintech (Jul 20, 2012)

Very Nice


----------



## Faun (Jul 23, 2012)

krishnandu.sarkar said:


> ^^That's awesome





himadri_sm said:


> Yeah it look's much better and a lot more professional and polished now..





mrintech said:


> Very Nice



Thanks guys  Glad that the theme is kind of good now.





Mario said:


> Looks *very neat* - bit boxy, especially when you have lots of text boxes (just being honest).. and the block letters in show cart don't look too good in the screenshot - may be because of the dimensions of the screenshot itself, not sure how it looks on the monitor.



Yeah, text boxes looks cramped up. May be increasing line height will help or probably other option someone can suggest.


----------



## Mario (Jul 23, 2012)

Faun said:


> Yeah, text boxes looks cramped up. May be increasing line height will help or probably other option someone can suggest.



May be break it up into sections/sub-pages?
Or maybe expand/collapse a la xml?


----------



## gopi_vbboy (Jul 24, 2012)

Use html5/CSS3/jquery


----------



## Faun (Aug 13, 2012)

Added few more features. Will post screenshots later. Critiques and comments appreciated.

Here are the current development screenshots:

My Account page:
*farm9.staticflickr.com/8432/7774872424_cdd43d910f_o.png

Change Password:
*farm9.staticflickr.com/8425/7774870852_e144165c74_o.png

Address Management, half baked:
*farm9.staticflickr.com/8297/7774871614_68af1831ca_o.png

Adding another shipping Address:
*farm9.staticflickr.com/8303/7774870012_cb484078a2_o.png

Address Management with added shipping address:
*farm9.staticflickr.com/8304/7774869286_eb63dd3fd6_o.png

Cart with easy address selection, yet to implement quick selection of address:
*farm9.staticflickr.com/8421/7774868492_20b18fae94_o.png

Updated Order with current status in My Account page:
*farm9.staticflickr.com/8292/7774867564_2c854c78a0_o.png


----------



## Faun (Aug 16, 2012)

Manage Orders Page
*farm8.staticflickr.com/7115/7790495336_5029499d5b_o.png

My Account Page
*farm9.staticflickr.com/8448/7790494768_bebfc27452_o.png

Show cart is now completely ajaxified.


----------



## Mario (Aug 16, 2012)

Spoiler






Faun said:


> *farm9.staticflickr.com/8421/7774868492_20b18fae94_o.png






Looks very nice. In the image quoted above, is it possible to align the lower edge of the box on the right with the lower edge of the one on the left?
Would probably look better that way?

Also make "Proceed to Pay" a button?

Finally, go uppercase to initcap? Somehow the uppercase words appear a little loud.


----------



## Faun (Aug 16, 2012)

^^thanks

1. Because the height of columns is dependent upon number of shipping address saved by the person, I think it will take a bit more research to do that. Probably there should be a CSS solution, otherwise javascript solution should be there. Let me see if it work out fine. But it's priority is kind of low as of now since there are couple of more important features to be added. Thanks for pointing out.

2. Already made Proceed to Pay as a button. Also, my logic for check out is that. 1. User update the cart if necessary 2. User clicks on the address he want to ship the product (notice that second address is highlighted with white shadow and another visual cue is the pulsating effect on the selected address for a brief interval and a notification at the top header) 3. Proceed to Pay appear after that and final checkout can be done on clicking it
*h.dropcanvas.com/4199b/proceedtopay1.PNG

3, Will do that. I'll neeed to change the font as the current font is all caps. Can you suggest a good font.


----------



## Mario (Aug 16, 2012)

The "glowing" address and the notifications are good ideas, but the notification is putting off the overall theme - probably because of its layout? Not sure where to put it exactly, but perhaps may be better placed?

Also, instead of "Shipping Address set to 3", will it be better to have "Shipping Address set to <City> - <Zip>"?

Finally, you really don't want *my* suggestions on fonts, colors, lines, basically anything to do with "design", "aesthetics", "beauty" etc....you get the drift!  I could select colors and fonts on a website and make the predator in "Predator" appear handsome in contrast to my "design".  Perhaps, nbaztec could help.






I checked Amazon and what fonts are these? Arial? They look ok to me.

Edit: Darn, the images don't show! How do you make attachments display as images! Or you cant?


----------



## chethanr (Aug 17, 2012)

It has its own admin interface? just curious. One question. Why anyone need to build store from scratch than using tools like OpenCart.


----------



## Mario (Aug 17, 2012)

chethanr said:


> It has its own admin interface? just curious. One question. Why anyone need to build store from scratch than using tools like OpenCart.



Its a build-and-learn exercise.


----------



## Faun (Aug 18, 2012)

chethanr said:


> One question. Why anyone need to build store from scratch than using tools like OpenCart.



Because I feel that it gives more control and experience to build it from scratch.

Did some UI changes and backend change for order management:

*farm9.staticflickr.com/8425/7803671284_002afc4102_o.png

*farm9.staticflickr.com/8286/7803670530_5632b62c8c_o.png

*farm9.staticflickr.com/8283/7803669728_b8c070c1d8_o.png

*farm9.staticflickr.com/8306/7803669052_7b8b087d60_o.png

*farm8.staticflickr.com/7130/7803668444_1fd2e3754e_o.png


----------



## Faun (Aug 22, 2012)

Blocked access to pages which are not to be visible to a guest without log in
*dropcanvas.com/files/1000000/52000/51872/big/redirect.PNG

Did some UI designing and here is the result for button anchors:
Button idle:
*dropcanvas.com/files/1000000/52000/51872/big/buttonidle.PNG

Button hover:
*dropcanvas.com/files/1000000/52000/51875/big/buttonhover.PNG

Button pressed
*dropcanvas.com/files/1000000/52000/51872/big/buttonpressed.PNG

Initially I went for glossy design but then this understated design looks better IMO.


----------



## Faun (Aug 27, 2012)

Done with multiple image upload. Then setting the primary display image and deleting the ones the admin doesn't want using ajax. It was fun to do.

*s.dropcanvas.com/1000000/54000/53346/big/primaryimage.PNG


----------



## chethanr (Aug 27, 2012)

Sounds interesting... I also love programming. Its like art. But I dont know how to start. I know programming basics and work in web hosting corp. Know how to install CMS applications and basics of PHP, Javascript, css and Ajax but don't know from where to begin.  What I am looking for is how to get an idea like to structure or like skeleton of the website. Not sure if I explained it properly. 

Btw: i can grasp any code quickly and can write my own simple code etc.
What I try normally is for example if I install WordPress, I try to understand the code all at once.


----------



## Mario (Aug 27, 2012)

chethanr said:


> Sounds interesting... I also love programming. Its like art. But I dont know how to start. I know programming basics and work in web hosting corp. Know how to install CMS applications and basics of PHP, Javascript, css and Ajax but don't know from where to begin.  What I am looking for is how to get an idea like to structure or like skeleton of the website. Not sure if I explained it properly.
> 
> Btw: i can grasp any code quickly and can write my own simple code etc.
> What I try normally is for example if I install WordPress, I try to understand the code all at once.



Well you could try by building a custom CMS yourself. There would be three basic parts, the frontend (presentation, UI etc.), the backend (store) and the engine (tag-replacer). 
Use a 3rd-party WYSIWYG editor maybe or maybe even build one yourself (but that would be a separate project altogether)


----------



## jimmyhelu1 (Aug 30, 2012)

Much appreciated I will look into those links shortly. Are there ant tutorials on linking a DB into a site? I've made access DB before and worked with SQL but never made from scratch and then reflected results into a website. Do these links do this? I really would like an easy way to enter products in. Looking for an out of the box solution where it prompts me for our product into one at a time and then produces a ecommerce. I know I'm asking a lot but maybe these tools exist. Again, I haven't looked at the links provided yet so they may and I will look shortly but just in case.


----------



## Faun (Sep 1, 2012)

^^There are ready made solutions to what you are looking for. But if you want to start from scratch with least time in setting up the development environment then get the XAMPP package. It will get you up and running in no time.



chethanr said:


> Sounds interesting... I also love programming. Its like art. But I dont know how to start. I know programming basics and work in web hosting corp. Know how to install CMS applications and basics of PHP, Javascript, css and Ajax but don't know from where to begin.  What I am looking for is how to get an idea like to structure or like skeleton of the website. Not sure if I explained it properly.
> 
> Btw: i can grasp any code quickly and can write my own simple code etc.
> What I try normally is for example if I install WordPress, I try to understand the code all at once.



First create a basic template.
header.php
nav.php
content.php
sidebar.php
footer.php

And then start adding pages according to your design.

did some modifications on product listing and product page:
*farm9.staticflickr.com/8173/7903329018_a33ce6dd9a_c.jpg

*farm9.staticflickr.com/8306/7903327638_6b9eaaa485_c.jpg


----------



## prabhu.wali (Oct 11, 2012)

good design!!just wanted ask,are you protected against sql and html injection?


----------



## dead.night7 (Oct 11, 2012)

Awesome and informative, UI looks great. Heres my project view, made for this year, A similar idea still, I have to submit it by Ist week of January,... 

Used HTML5, CSS3, jQuery, Google Charts for the frontend, and JSP-Servlet along with MySQL for the backend,


----------



## Faun (Oct 11, 2012)

prabhu.wali said:


> good design!!just wanted ask,are you protected against sql and html injection?



Yeah, doing sanitization for inputs.




dead.night7 said:


> Awesome and informative, UI looks great. Heres my project view, made for this year, A similar idea still, I have to submit it by Ist week of January,...
> 
> Used HTML5, CSS3, jQuery, Google Charts for the frontend, and JSP-Servlet along with MySQL for the backend,



That's pretty good design. Back in out days people hardly gave importance to design.

I am working on something else now. This website work will resume after that.


----------



## Anorion (Oct 11, 2012)

wow
pourquoi est livry avec en francais? (bas de l'image finale)
sliders are good, very web 2.0-y


----------



## argalon (Aug 31, 2016)

Faun said:


> Yeah, doing sanitization for inputs.
> 
> 
> 
> ...



Generally product based sites or you can say eCommerce sites hardly give importance to design. Still your design is quiet improved from where you have started. 

Have you launched the website or it is on hold?

BTW nice work by you after the gap as you specified!

____________________________________
PHP development company in Indore


----------



## Faun (Sep 25, 2016)

argalon said:


> Generally product based sites or you can say eCommerce sites hardly give importance to design. Still your design is quiet improved from where you have started.
> 
> Have you launched the website or it is on hold?
> 
> ...



I plan to start using Django and AngularJS now. 

Thanks for the appreciation.


----------

