Knowledgebase

Making a bandwidth/storage calculator for my site.

Posted by Zircon Oscar, 01-14-2013, 09:08 PM
Hey all, I am in the process of making my web hosting site and really wanted to put in a calculator so that my customers can determine how much bandwidth and storage space they will need and therefore which package to go for. I have knowledge of HTML, CSS and limited PHP knowledge. I know I could do this with PHP rather easily but as I don't want to take the user away from the page i'm assuming javascript would be better for this tool? Basically I want the user to enter some information such as the average page size, visitors per day, page views per visitor. Then I want to calculate Bandwidth needed = Average Page Views x Average Page Size x Average Daily Visitors x Number of days in a month. It would also be cool if I could then point out which plan I have would fit best. Basically I am asking if javascript is the best option and if anyone knows of a tutorial of how to do something similar that I could adapt to my needs. Thanks, Oscar.

Posted by applemasher, 01-14-2013, 09:21 PM
Yes, JavaScript would be good for this. You might want to look at a UI framework like jQuery UI so that it looks nice. Then, tutorials are easy to find, but think about what type of controls you might use. For example, you might want to use a slider for selecting average daily visitors. Put together a basic layout, and then the code itself should be pretty easy.

Posted by Zircon Oscar, 01-14-2013, 09:36 PM
A slider does sound like a nice idea. Would this be viable to make easily as I have no prior javascript knowledge?

Posted by applemasher, 01-14-2013, 10:14 PM
Yea, jQuery makes JavaScript easy. For the slider, you just go here: http://jqueryui.com/slider/ It's basically just include jquery and jqueryUI scripts in the head of your html and then use the following code:
To get the value, it should just be $("#slider").val(). In jQuery the # is select by id, whereas the . (period) is select by class. Basically, you would want to learn the basic jquery selectors. Some people might argue, that you should really learn JavaScript first. And, I'll reference this article where they pose the question: http://stackoverflow.com/questions/6...earning-jquery. And it might help to spend a day or two doing pure JavaScript tutorials first. But, jQuery makes JavaScript easier to use (takes care of browser differences, etc). Personally, I think as long as your coding stuff, you just learn by doing stuff. You can really learn them both at the same time without any trouble. And learning one helps you learn the other. The only caveat is you should know which is a jQuery helper, and what is a regular javascript code. For example, the above id selector would roughly be: document.getElementById('slider'); //in javascript $("#slider"); in jQuery. Basically, a rule of thumb would be that anything with a $ in front is going to be a jQuery selector.

Posted by Zircon Oscar, 01-15-2013, 01:54 AM
hmm that looks quite complicated...I'm tempted to hire someone to do it for me on fiverr, however I do love learning how to do it my self.

Posted by applemasher, 01-15-2013, 09:05 AM
Sorry, I probably put too much topics in my reply. JavaScript is really easier then PHP. There's less to learn because its all just client side. Really, just focus on the html/css/layout first. And then once your done, just use javascript to add the values from each input element. Also, you will probably only actually need 2 or 3 lines of javascript. Just select the value of each input and add them together.



Was this answer helpful?

Add to Favourites Add to Favourites

Print this Article Print this Article

Also Read
Custom Domain Servers? (Views: 635)
Poundhost.com (Views: 667)


Language:

Client Login

Email

Password

Remember Me

Search