[Complete n00b to web development] Need suggestions on how to code this mockup ..

@ahmadkaJul 03.2011

HI guys … Well I have a little part time selling thing going on as a hobby, and I’m trying to make a really basic web page through which customers can indicate which items they want to buy, and what custom options they want for each of these options .. As they’re making selections, a total displayed on the right side keeps changing to show the update total cost based on the options selected by the user .. So its kind of like what you see on custom computer building sites where users select options to customize their machines .. In the end the user enters their email address in a box and clicks on a button, which sends me an email with the complete configuration chosen by the user so that I can examine it ..

Here is a basic mockup I’ve just made on what I want to get:

~~[IMG]~~http://img638.imageshack.us/img638/4472/myimage3.png[/IMG]

The thing is I have experience in developing offline executable programs using C++, C#, Java, etc .. But I’ve never done any web development … I dont have experience in coding in ANY web development language (apart from basic HTML which I tried years ago), so terms like AJAX, CSS, Javascript, Perl, Python, etc, are completely unknown to me .. But I can learn, thats not a problem .. In fact, the reason why I want to make this is to also try and learn web development … So I need some guidance on how to go about coding this …

1) Like what language should I use to code this ?
2) Any recommended tutorials I can go through which have sample code as well ?
3) Any IDEs which can be used to ease the programming process ?
4) Any other already available template codes I can study maybe ?

Any other suggestions are most welcome as well ..

I know I can probably buy template site codes which are ready to go, but I want to code this myself so that I learn some web development things in the process too …

Also, I dont think it should be that hard to code .. All there is, is just a bunch of checkboxes, which when checked or unchecked change the total amount shown .. and then the email thing simply reads the statuses of all checkboxes and sends me an email containing this information …

In time I intend to add more stuff to it to make it more powerful, and maybe even add PayPal payment integration in the end as well, etc …

I have a couple of web hosting domains available, and I plan to put this on one of them ..

Thanks in advance for all your help guys .. ?

to post a comment

Full-stack Developer

2 Comments(s) _↴

@simplefrancoJul 03.2011 — #Hey ahmadka,

The fastest way would be to do all those inputs in an HTML page (checkboxes, drop downs, etc) which shouldn't be too hard even for someone who's starting. By fastest, I mean you wouldn't have the flexibility to edit those items from a database and would have to insert/delete them by going through your HTML code.

However, you would need some server-side parser to receive the form data. I'm used to PHP, which is open source and should already be set in most hosting servers. However, it doesn't mean it's the best choice and I can't compare it to other alternatives.

Then for the checkboxes and total value, you would need to handle a bit of JavaScript, (which runs client-side and shapes up the form options so it can be submitted to the server later, for parsing) to call a function to calculate the total whenever you clicked certain inputs.

As for IDEs, being a 'small' project, I'd say stick to something simple, or it may 'backfire', as you'll find it bloated, probably. Dreamweaver (paid/30-day trial) is a great tool to start with, simply because of the auto-complete features for both HTML and CSS. Most IDEs are directed to bigger projects with more files and are prepared to handle file 'includes' as well as classes but usually drop out the simple things like you need for now.

As for starting, I think you should read "Forms in HTML documents" from W3C and look at the <form>, <input> and <select> elements, which are the ones you need. Special attention to the <form [B]action[/B]="somefile.ext" [B]onsubmit[/B]="some_javascript_function()"> as that's where you will receive the data, handle it, and send the e-mail.

I left the server-side actions apart from it, as I believe you should focus on the client-side for now (html + javascript).

Hope it helps.

@WonDer9Jul 12.2011 — #"If you know C, you know code" - me

Its all the same basically, your even at a better position, because logic will come easy to you.

1) use XHTML - better structuring habits = used to establish page elements. place in order of placement is key. 1,2,3,4,5 no mix matching allowed.

2) CSS - using what you placed in HTML to build. = forms your structure and gives it shape. focus is on positioning.

3)CSS positioning -

+absolute: sturdy, but aspect can be shaky.

+relative/static: normal style, but left, right, top, bottom can be added.

+fixed: similar to absolute, but scrolls w/ page.

+float: the best;break page into 3 top,mid,lower. work ea. section separately. as if whole page. margin is used to position -left to -right. so div inside div is needed to control space.

3)Javascript or Jquery : user response. used to inform your visitors, button pushes and missing input. and anything that requires your page not to refresh(real-time) effects. like a calculator. like the GUI logic.

4)Server-side: each language is unique. But all are practically the same. Used to handle data and information submitted, acquired and had. User password control, data retrieval, data handling, data saving. Here you C++ exp. will definitely come in handy.

5)Action-script: Javascript & server-side of Flash. does all for both.

6)XML: "it can be all the above" usually used as meat for a meat grinder. control information structure to be utilized.........blah blah blah. you can use plain text. but if you can understand it, "you can write your own language".--yeah, that's why its respected.

7)http: and all that other none sense. "API's and other server to server manipulation."

in closing the first 4 is all you need for industrial strength stuff. 5 is in relation to flash, and 7 is really just RSS and info passing to other languages. 7) is for nerds?. leave it alone. As you can see I've done a lot of reading so you don't have too.

dealing with forms w3.schools is nice but http://www.tizag.com/htmlT/forms.php will give you all you need when dealing with forms.

++ one last note don't barter saving in html anymore. whatever server-side you choose should be your new file extension.

++ Notepad++ and xampp is my IDE. fast, efficient and easy to use.

++webmatrix aint bad, and secure over the internet, but slow. I don't trust xampp over the net is all.

hope that helps.