Creating the Back-end

Defining Variables:

Let's proceed step-by-step to create the processing logic for the Configurator. Listing 1 defines the application's global variables. Note that these appear outside of any specific function; as a result, they have global scope and are available throughout the web page.

Listing 1. Variables for custom computer estimator scripts

//flag to make sure function compute() is called
var called=false;
//the default for total price is always $0.00 
var T_Price=0;
//flags for keeping track of CPU choice
var pr_flag;
var pr_print="";

var sp_flag;    //flag for Speed
var sp_print;

var ram_flag;   //flag for RAM
var ram_print;

var hdrive_flag;        //flag for Hard Drive
var hdrive_print;

// ... flags for other device options 

As you can see from the comments, most of the variables have been used to keep track of the selection options. The variable T_Price is used to addup the price of all the selected components. The Boolean variable was used to make sure the compute() function is called.

This is the most important function in the application. compute() keeps track of all the options chosen by the user and does the final calculation. Listing 2 below shows most of the code for the function (to get the complete code, use View Source on the finished configurator).

Listing 2. Partial Listing for function compute().

function compute(form){
called=true;

//-------Processor----------
if (form.processor[0].selected){
        pr_flag=0;
        pr_print= "None [$0]";
}

else if (form.processor[1].selected){
        pr_flag =540;
        pr_print="68LCO45 DD [$540]";
}

else if (form.processor[2].selected){
        pr_flag =340;
        pr_print="68LCO45 EE [$340]";
}

...

//-------Speed----------
if (form.speed[0].selected){
        sp_flag=0;
        sp_print="None [$0]";
}

else if (form.speed[1].selected){
        sp_flag=110;
        sp_print="60 MHz [$110]";
}

else if (form.speed[2].selected){
        sp_flag=145;
        sp_print="66/33 MHz [$145]";
}

...

//-------RAM-----------
if (form.ram[0].selected){
        ram_flag=0;
        ram_print="None [$0]";
}

else if (form.ram[1].selected){
        ram_flag=75;
        ram_print="4 MB RAM [$75]";
}

else if (form.ram[2].selected){
        ram_flag=120;
        ram_print="8 MB RAM [$120]";
}

...

//-------Hard Drive-------
if (form.hdrive[0].selected){
        hdrive_flag=0;
        hdrive_print="None [$0]";
}

else if (form.hdrive[1].selected){
        hdrive_flag=100;
        hdrive_print="250MB [$100]";
}

else if (form.hdrive[2].selected){
        hdrive_flag=200;
        hdrive_print="500MB [$200]";
}

...

//------- VRAM -------
    // VRAM code goes here
//------- Floppy -------
    // Floppy code goes here
//------- CD ROM -------
    // CD ROM code goes here
//---------- Monitor -----------
    // Monitor code goes here
//... code for other options

//----------calcuation of price
T_Price=pr_flag+sp_flag+ram_flag+hdrive_flag+
   vram_flag+ fdrive_flag+cd_flag+mn_flag+
   mos_flag+kb_flag+modem_flag+card_flag;

//-----display of price------------
form.T_Price.value="     $ "+ T_Price;
}

You might be saying to yourself, "This code is very repetitious!" You're right: we use the same code pattern to handle each of the component selections.

Let's walk through the function to illustrate how business logic can be implemented using JavaScript. 

Page 1 2 3