Solved

online configurator

Posted on 2004-09-16
6
473 Views
Last Modified: 2008-02-01
I need to build an online configurator that will allow users to choose various components, and the number of each required, and then display a total price for the chosen configuration.  When they are happy with the configuration and price they will be able to click a button that will send the details via email so the lead can be followed up.

In all there are 10 components (they can choose any combination) each with a fixed price that will remain static.  The site will need to be able to take, potentially, thousands of hits per day.

My question is simply what is the best way of building this.  Previously I built sites using asp and vbscript using Access as a db.  

Because there are only 10 components and 10 prices would the best way to be to store the prices as vbscript constants  rather than storing them in a back end db and then let vbscript do the sums?

Also it would be useful to store each configuration that the users try and of course their details should they want more information.  I imagine Access wouldn’t be up to the job if there is a lot of traffic.

Any help/advice gratefully received.

Ken
0
Comment
Question by:kenabbott
  • 3
  • 2
6 Comments
 

Expert Comment

by:my51chevy
Comment Utility
A little long, but this should work.  If there are only ten options you show be able to use the code below.  just change it to meet your needs
-------------------------------------

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
      function CheckChoice(whichbox)
      {
            with (whichbox.form)
            {
                  //Handle differently, depending on type of input box.
                  if (whichbox.type == "radio")
                  {
                        //First, back out the prior radio selection's price from the total:
                        hiddentotal.value = eval(hiddentotal.value) - eval(hiddenpriorradio.value);
                        //Then, save the current radio selection's price:
                        hiddenpriorradio.value = eval(whichbox.price);
                        //Now, apply the current radio selection's price to the total:
                        hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.price);
                  }
                  else
                  {
                        //If box was checked, accumulate the checkbox value as the form total,
                        //Otherwise, reduce the form total by the checkbox value:
                        if (whichbox.checked == false)
                              { hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value); }
                        else       { hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value); }
                  }

                  //Ensure the total never goes negative (some browsers allow radiobutton to be deselected):
                  if (hiddentotal.value < 0)
                        {
                        InitForm();
                        }

                  //Now, return with formatted total:
                  return(formatCurrency(hiddentotal.value));
            }
      }

      //Define function to format a value as currency:
      function formatCurrency(num)
      {
         // Courtesy of http://www7.brinkster.com/cyanide7/
            num = num.toString().replace(/\$|\,/g,'');
            if(isNaN(num))
               num = "0";
            sign = (num == (num = Math.abs(num)));
            num = Math.floor(num*100+0.50000000001);
            cents = num%100;
            num = Math.floor(num/100).toString();
            if(cents<10)
                cents = "0" + cents;
            for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
                num = num.substring(0,num.length-(4*i+3))+','+
                      num.substring(num.length-(4*i+3));
            return (((sign)?'':'-') + '$' + num + '.' + cents);
      }

      //Define function to init the form on reload:
      function InitForm()
            {
            //Reset the displayed total on form:
            document.FrontPage_Form1.total.value='$0';
            document.FrontPage_Form1.hiddentotal.value=0;
            document.FrontPage_Form1.hiddenpriorradio.value=0;


            //Set all checkboxes and radio buttons on form-1 to unchecked:
            for (xx=0; xx < document.FrontPage_Form1.elements.length; xx++)
            {
               if (document.FrontPage_Form1.elements[xx].type == 'checkbox' | document.FrontPage_Form1.elements[xx].type == 'radio')
                  {
                  document.FrontPage_Form1.elements[xx].checked = false;
                  }
            }
      

      }

//  End -->
</script>

</HEAD>
<BODY onLoad="InitForm();" onreset="InitForm();">

<!--#INCLUDE file="header.asp"-->

<% Set objDbConnection = Server.CreateObject("ADODB.Connection")

objDbConnection.Open Session("SAMPLE")

varQuery = "Select * from [payment_type] Order by Payment"

Set rsPayment = objDbConnection.Execute(varQuery) %>

<% feeQuery = "Select * from meeting_fees where MeetingID = " & request("ID") & "  " %>
<% Set rsFees = objDbConnection.Execute(feeQuery) %>

<center>
<!--webbot BOT="GeneratedScript" PREVIEW=" " startspan --><script Language="JavaScript"><!--
function FrontPage_Form1_Validator(theForm)
{

  if (theForm.ccname.value == "")
  {
    alert("Please enter a value for the \"Name on Credit Card\" field.");
    theForm.ccname.focus();
    return (false);
  }

  if (theForm.ccname.value.length < 1)
  {
    alert("Please enter at least 1 characters in the \"Name on Credit Card\" field.");
    theForm.ccname.focus();
    return (false);
  }

  if (theForm.ccnumber.value == "")
  {
    alert("Please enter a value for the \"Credit Card Number\" field.");
    theForm.ccnumber.focus();
    return (false);
  }

  if (theForm.ccnumber.value.length < 12)
  {
    alert("Please enter at least 12 characters in the \"Credit Card Number\" field.");
    theForm.ccnumber.focus();
    return (false);
  }

  var checkOK = "0123456789-.";
  var checkStr = theForm.ccnumber.value;
  var allValid = true;
  var decPoints = 0;
  var allNum = "";
  for (i = 0;  i < checkStr.length;  i++)
  {
    ch = checkStr.charAt(i);
    for (j = 0;  j < checkOK.length;  j++)
      if (ch == checkOK.charAt(j))
        break;
    if (j == checkOK.length)
    {
      allValid = false;
      break;
    }
    if (ch == ".")
    {
      allNum += ".";
      decPoints++;
    }
    else
      allNum += ch;
  }
  if (!allValid)
  {
    alert("Please enter only digit characters in the \"Credit Card Number\" field.");
    theForm.ccnumber.focus();
    return (false);
  }

  if (decPoints > 1)
  {
    alert("Please enter a valid number in the \"ccnumber\" field.");
    theForm.ccnumber.focus();
    return (false);
  }
  return (true);
}
//--></script><!--webbot BOT="GeneratedScript" endspan --><form action="payment-process.asp" method="post" name="FrontPage_Form1" onsubmit="return FrontPage_Form1_Validator(this)">
<table border=0>
<tr><td colspan="3">
<center><font color="blue" face="arial">Please Choose Registration Fee</center></font></td>
</tr>
<tr>
<td colspan="3">
<hr width="100%">
</td></tr>
<tr>
<td colspan="3">
<font color="blue" face="arial"><strong>By <%=rsFees("cutoffdate")%></strong>
</td>
</tr>
<tr>
<td>
<font color="blue" face="arial"><%=rsFees("mem_d")%>
</td>
<td>
<font color="blue" face="arial">US$ <%=rsFees("early_member")%>
</td>
<td>
<% IF NOW <= rsFees("cutoffdate") THEN %>
<input type="checkbox" value="<%=rsFees("early_member")%>" Name="Early_Mem" onclick="this.form.total.value=CheckChoice(this);">
<% End If %>
</td>
</tr>
<tr>
<td>
<font color="blue" face="arial"><%=rsFees("non_d")%>
</td>
<td>
<font color="blue" face="arial">US$ <%=rsFees("early_non")%>
</td>
<td>
<% IF NOW <= rsFees("cutoffdate") THEN %>
<input type="checkbox" value="<%=rsFees("early_non")%>" Name="Early_Non" onclick="this.form.total.value=CheckChoice(this);">
<% End If %>
</td>
</tr>
<tr>
<td>
<font color="blue" face="arial"><%=rsFees("guest_d")%>
</td>
<td>
<font color="blue" face="arial">US$ <%=rsFees("early_guest")%>
</td>
<td>
<% IF NOW <= rsFees("cutoffdate") THEN %>
<input type="checkbox" value="<%=rsFees("early_guest")%>" Name="early_guest" onclick="this.form.total.value=CheckChoice(this);">
<% End If %>
</td>
</tr>

<tr>
<td colspan="3">
<hr width="100%">
</td></tr>
<tr>
<td colspan="3">
<font color="blue" face="arial"><strong>After <%=rsFees("cutoffdate")%></strong>
</td>
</tr>
<tr>
<td>
<font color="blue" face="arial"><%=rsFees("mem_d")%>
</td>
<td>
<font color="blue" face="arial">US$ <%=rsFees("late_member")%>
</td>
<td>
<% IF NOW > rsFees("cutoffdate") THEN %>
<input type="checkbox" value="<%=rsFees("late_member")%>" Name="late_mem" onclick="this.form.total.value=CheckChoice(this);">
<% End If %>
</td>
</tr>
<tr>
<td>
<font color="blue" face="arial"><%=rsFees("non_d")%>
</td>
<td>
<font color="blue" face="arial">US$ <%=rsFees("late_non")%>
</td>
<td>
<% IF NOW > rsFees("cutoffdate") THEN %>
<input type="checkbox" value="<%=rsFees("late_non")%>" Name="late_non" onclick="this.form.total.value=CheckChoice(this);">
<% End If %>
</td>
</tr>
<tr>
<td>
<font color="blue" face="arial"><%=rsFees("guest_d")%>
</td>
<td>
<font color="blue" face="arial">US$ <%=rsFees("late_guest")%>
</td>
<td>
<% IF NOW > rsFees("cutoffdate") THEN %>
<input type="checkbox" value="<%=rsFees("late_guest")%>" Name="late_guest" onclick="this.form.total.value=CheckChoice(this);">
<% End If %>
</td>
</tr>
<% IF rsFees("extra_fee1_d") = "NA" THEN %>
<% Else  %>
      <tr>
<td colspan="3">
<hr width="100%">
</td></tr>
      <tr>
      <td>
      <font color="blue" face="arial"><strong><%=rsFees("extra_fee1_d")%></strong>
      </td>
      <td>
      <font color="blue" face="arial">US$ <%=rsFees("extra_fee1_c")%>
      </td>
      <td>
      <input type="checkbox" value="<%=rsFees("extra_fee1_c")%>" Name="x1" onclick="this.form.total.value=CheckChoice(this);">
      </td>
      </tr>
<% End If %>

<% IF rsFees("extra_fee2_d") = "NA" THEN %>
<% Else  %>
      <tr>
<td colspan="3">
<hr width="100%">
</td></tr>
      <tr>
      <td>
      <font color="blue" face="arial"><strong><%=rsFees("extra_fee2_d")%></strong>
      </td>
      <td>
      <font color="blue" face="arial">US$ <%=rsFees("extra_fee2_c")%>
      </td>
            <td>
      <input type="checkbox" value="<%=rsFees("extra_fee2_c")%>" Name="x2" onclick="this.form.total.value=CheckChoice(this);">
      </td>
      </tr>
<% End If %>

<% IF rsFees("extra_fee3_d") = "NA" THEN %>
<% Else  %>
      <tr>
<td colspan="3">
<hr width="100%">
</td></tr>
      <tr>
      <td>
      <font color="blue" face="arial"><strong><%=rsFees("extra_fee3_d")%></strong>
      </td>
      <td>
      <font color="blue" face="arial">US$ <%=rsFees("extra_fee3_c")%>
      </td>
            <td>
      <input type="checkbox" value="<%=rsFees("extra_fee3_c")%>" Name="x3" onclick="this.form.total.value=CheckChoice(this);">
      </td>
      </tr>
<% End If %>

<% IF rsFees("extra_fee4_d") = "NA" THEN %>
<% Else  %>
      <tr>
<td colspan="3">
<hr width="100%">
</td></tr>
      <tr>
      <td>
      <font color="blue" face="arial"><strong><%=rsFees("extra_fee4_d")%></strong>
      </td>
      <td>
      <font color="blue" face="arial">US$ <%=rsFees("extra_fee4_c")%>
      </td>
            <td>
      <input type="checkbox" value="<%=rsFees("extra_fee4_c")%>" Name="x4" onclick="this.form.total.value=CheckChoice(this);">
      </td>
      </tr>
<% End If %>

<% IF rsFees("extra_fee5_d") = "NA" THEN %>
<% Else  %>
      <tr>
<td colspan="3">
<hr width="100%">
</td></tr>
      <tr>
      <td>
      <font color="blue" face="arial"><strong><%=rsFees("extra_fee5_d")%></strong>
      </td>
      <td>
      <font color="blue" face="arial">US$ <%=rsFees("extra_fee5_c")%>
      </td>
            <td>
      <input type="checkbox" value="<%=rsFees("extra_fee5_c")%>" Name="x5" onclick="this.form.total.value=CheckChoice(this);">
      </td>
      </tr>
<% End If %>

<% IF rsFees("extra_fee6_d") = "NA" THEN %>
<% Else  %>
      <tr>
<td colspan="3">
<hr width="100%">
</td></tr>
      <tr>
      <td>
      <font color="blue" face="arial"><strong><%=rsFees("extra_fee6_d")%></strong>
      </td>
      <td>
      <font color="blue" face="arial">US$ <%=rsFees("extra_fee6_c")%>
      </td>
            <td>
      <input type="checkbox" value="<%=rsFees("extra_fee6_c")%>" Name="x6" onclick="this.form.total.value=CheckChoice(this);">
      </td>
      </tr>
<% End If %>

<% IF rsFees("extra_fee7_d") = "NA"  THEN %>
<% Else  %>
      <tr>
<td colspan="3">
<hr width="100%">
</td></tr>
      <tr>
      <td>
      <font color="blue" face="arial"><strong><%=rsFees("extra_fee7_d")%></strong>
      </td>
      <td>
      <font color="blue" face="arial">US$ <%=rsFees("extra_fee7_c")%>
      </td>
            <td>
      <input type="checkbox" value="<%=rsFees("extra_fee7_c")%>" Name="x7" onclick="this.form.total.value=CheckChoice(this);">
      </td>
      </tr>
<% End If %>


<tr>
<td colspan="3">
<hr width="100%">
</td></tr>
<tr><td colspan="3">
<center><font color="blue" face="arial">Please Enter Your Payment Information</center></font></td>
</tr>
<tr>
<td colspan="3">
<hr width="100%">
</td></tr>
<tr>
<td>
<font face="arial" color="blue">Name on Card:
</td>
<td>
<!--webbot bot="Validation" S-Display-Name="Name on Credit Card"
S-Data-Type="String" B-Value-Required="TRUE" I-Minimum-Length="1" -->
<input type="text" name="ccname" size=40>
</td>
</tr>
<tr><td><font face="arial" color="blue">Credit Card:</td>
<td>
<select name="PaymentType">
<% DO WHILE NOT rsPayment.EOF %>
<Option value="<%=rsPayment("type_ID")%>"><%=rsPayment("Payment")%>


<% rsPayment.MoveNext %>
<% LOOP %>
</select>
</td>
</tr>
<tr>
<td>
<font face="arial" color="blue">Card Number:
</td>
<td>
<!--webbot bot="Validation" S-Display-Name="Credit Card Number"
S-Data-Type="Number" S-Number-Separators="x." B-Value-Required="TRUE"
I-Minimum-Length="12" -->
<input type="text" name="ccnumber" size=40>
</td>
</tr>
<tr>
<td>
<font face="arial" color="blue">Expiration:
</td>
<td>
<font face="arial" color="blue">Month
<select name="ccmonth">
      <option value="1" SELECTED>1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
</select>
<font face="arial" color="blue">Year
<select name="ccyear">
      <option value="<%=year(now)%>" SELECTED><%=year(now)%></option>
      <option value="<%=(year(now)+1)%>"><%=(year(now)+1)%></option>
      <option value="<%=(year(now)+2)%>"><%=(year(now)+2)%></option>
      <option value="<%=(year(now)+3)%>"><%=(year(now)+3)%></option>
      <option value="<%=(year(now)+4)%>"><%=(year(now)+4)%></option>
      <option value="<%=(year(now)+5)%>"><%=(year(now)+5)%></option>
      <option value="<%=(year(now)+6)%>"><%=(year(now)+6)%></option>
      <option value="<%=(year(now)+7)%>"><%=(year(now)+7)%></option>
      <option value="<%=(year(now)+8)%>"><%=(year(now)+8)%></option>
</select>
</td>
</tr>
<tr>
<td colspan=3">
<hr width="100%"><br>
<input type="hidden" name="count" value="<%=count%>">
<input type="hidden" name="regID" value="<%=request("regid")%>">
<input type="hidden" name="id" value="<%=request("id")%>">
<input type="hidden" name="hiddentotal" value=0>
      <input type="hidden" name="hiddenpriorradio" value=0>
<font size=+1 face="arial" color="blue">
      Your total is: <input type="text" name="total" readonly onFocus="this.blur();">
      </font>
<input type="submit" value="Submit Registration">
</td>
</tr>

</table>
</center>
</form>
</body>
0
 
LVL 2

Accepted Solution

by:
harveykane earned 250 total points
Comment Utility
Because you only have 10 components, I would do a simple form with name, email etc and 10 quantity boxes. You can hard code the pricing into script variables rather than save in a DB to save queries. eg.

Name: ___________
Email: ___________
Name:           Price:   Qty:
Component 1 $14.95  [3  ]
Component 2 $31.45  [1  ]
Component 3 $23.55  [6  ]
etc
etc

Total: _______

[Submit]

Use a Javascript / VBScript to work out the totals for you on the "onchange" event of the quantity boxes. Submit saves to a DB and then sends you an email, or better yet saves to a DB and you run a script every day/hour/whatever to email you the day's submissions in a single email so your mailbox doesn't get overrun.

Make sure when the totals are emailed to you they are recalculated by ASP or the database. Don't bill them based on the total their client sends you as this might have an error (and show as zero) or might be hacked.

I would personally use PHP/MySQL because there are good, cheap hosts available that provide you with a reliable MySQL database that can handle 100,000+ queries per day. But then I haven't done anything of reasonable size with ASP / Access so Im the wrong person to ask.

Hope this helps :)
0
 

Author Comment

by:kenabbott
Comment Utility
That sounds a good solution - I have not used mySQL for a web db, whats the best way of downloading the data from the host to my local db??
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 2

Expert Comment

by:harveykane
Comment Utility
Normally you would write yourself a web admin section so you can view the data that's collected in a nicely formatted way, but there are other options.

Most hosts that have MySQL will provide you with something called PHPMyAdmin which lets you view/edit/maintain/export your MySQL database.

You can also get your website to save the data into a CSV (comma seperated values) file, which you can open up in Excel.

Another approach is to set up an ODBC connection to your web database via MS Access so that you can write MS Access forms / reports to view your data - It's easier to code up forms etc in access than PHP / ASP so this can be a good option for some people.

Let me know if you need any help with these.
0
 
LVL 2

Expert Comment

by:harveykane
Comment Utility
Also http://www.coolfreepages.com/ will provide you with a free PHP / MySQL web site.  It's very slow and riddled with ads, but it's a good way to have a free play with MySQL (and PHPMyAdmin) to see if it's what you are looking for.
0
 

Author Comment

by:kenabbott
Comment Utility
Thanks - that has been really useful.  One final thing - I am writing some test php pages and I am trying to connect to my local mySQL db using mysql_connect - however I can't get it to work - I get the error:

 Fatal error: Call to undefined function mysql_connect()

I don't know if I'm using the wrong syntax or do I have to setup my php installation for use with mysql??

Many thanks

Ken
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now