Overview
It is assumed that the reader has some knowledge of HTML (HyperText Markup Language) and programming logic. Access to reference materials is recommended!
The four-function calculator ASP (Active Server Page) uses HTML, CSS and JQuery for web page presentation and VBScript (Visual Basic Scripting) programming logic for ease of reading.
This application utilizes a client-server architecture where the client (Web Browser) initiates a request by POSTing to the web server using HTTP (Hypertext Transfer Protocol). In turn, the web server reciprocates with a web page to the client (Web Browser) as a response.
The following sections exhibit and explain the code snippets for web presentation and page processing logic including installation instructions onto a Windows operating system.
This web calculator is hosted at this link: ASP_Calculator
Web Page Presentation
<body>
<!-- Calculator FORM -->
<form method="POST" action="<%=myScriptName%>" name="CalculateIT">
<!-- Place border on FORM and border title accordingly -->
<fieldset style="border-color:green; background-color:beige">
<legend style="color:blue; font-size: 18pt; background-color:lightsteelblue"><%=myTitle%></legend>
<!-- Audit Trail and Intermediate Result textboxes -->
<table align="center">
<tr>
<td align="center">Audit Trail</td>
<td align="center">Intermediate Results</td>
</tr>
<tr>
<td><textarea id="t1" rows="15" name="AuditTape" cols="30" readonly="readonly"><%=frm_AuditTape%></textarea></td>
<td><textarea id="t2" rows="15" name="AccumTape" cols="40" readonly="readonly"><%=frm_AccumTape%></textarea></td>
</tr>
</table>
<!-- Script to scroll both result windows simultanously -->
<script type="text/javascript">
function Scroll_to_Bottom()
{
document.getElementById('t1').scrollTop=document.getElementById('t1').scrollHeight;
document.getElementById('t2').scrollTop=document.getElementById('t2').scrollHeight;
}
//call the function
Scroll_to_Bottom ();
</script>
<!-- Audit Trail and Intermediate Result textboxes -->
<br/>
<table border="1" cellpadding="10" cellspacing="0" align="center" style="border-collapse: collapse ; background-color:DarkSeaGreen">
<tr>
<td>
<!-- Place border on keyboard and display components -->
<fieldset style="border-color:green; background-color:lightsteelblue">
<!-- Calculator Display Title -->
<%=MaxInput%> Digit Display
<br/>
<!-- Calculator Display -->
<input name="NumIn" size="15" value="<%=frm_NumIn%>" style="text-align:right; font-size: 10pt" readonly="readonly">
<!-- Calculator Error Message area -->
<br/>
<font color=red size="2"><%=ErrMsg%></font>
<!-- Calculator Keypad -->
<br/>
<input id="btn" type="submit" value="C" name="Fclear" >
<input id="btn" type="submit" value="CE" name="Fcleare" >
<input id="btn" type="submit" value="off" name="Poff" style="background-color: red; ">
<input id="btn" type="submit" value="on" name="Pon" style="background-color: green; color:lawngreen; ">
<br/>
<input id="btn" type="submit" value="7" name="B7" >
<input id="btn" type="submit" value="8" name="B8" >
<input id="btn" type="submit" value="9" name="B9" >
<input id="btn" type="submit" value="/" name="Fdiv" >
<br/>
<input id="btn" type="submit" value="4" name="B4" >
<input id="btn" type="submit" value="5" name="B5" >
<input id="btn" type="submit" value="6" name="B6" >
<input id="btn" type="submit" value="x" name="Fmult" >
<br/>
<input id="btn" type="submit" value="1" name="B1" >
<input id="btn" type="submit" value="2" name="B2" >
<input id="btn" type="submit" value="3" name="B3" >
<input id="btn" type="submit" value="-" name="Fminus" >
<br/>
<input id="btn" type="submit" value="0" name="B0" >
<input id="btn" type="submit" value="." name="Bdot" >
<input id="btn" type="submit" value="=" name="Fequal" >
<input id="btn" type="submit" value="+" name="Fplus" >
</fieldset>
</td>
</tr>
</table>
</fieldset>
</form>
<u><i>myCalc</i></u> is for illustrative and educational purposes and does not represent a fully robust and tested calculator product.<br>
Copyright © 2015 Larry Belmontes, Jr.
</body>
The above snippet represents the HTML BODY section. The FORM, which is within the BODY, contains three components (keypad, audit trail and results) used to interact with the web browser and web server. Below is a description of HTML used in this web page.
| Line | Description |
| 4 | FORM declaration containing all interactive components within the <FORM> and </FORM> HTML tags. When form is submitted (keypad button is pressed), form data is POST-ed to the web server by invoking ASP script calc_42.asp. |
| 6-7 | Declare a green border with the title of myWeb Calculator. The border surrounds all calculator components. A beige background is applied within the green boarder. |
| 9-18 | Declare a one-row, two-column table containing two text boxes (AuditTape, AccumTape) centered horizontally within the FORM. |
| 21-29 | Javascript to scroll down both text boxes (AuditTape, AccumTape) simultaneously to keep current activity visible. |
| 33 | Declares a one-row, one-column table to contain the display and keypad components centered horizontally within the FORM. A DarkSeaGreen background is applied to the this table. |
| 37 | Declare a green border with a lightsteelblue background for keypad components (display, error message, keypad). |
| 39 | Display title (e.g. 12 Digit Display) on the calculator keypad. |
| 42 | Numeric entry text box on the calculator keypad. |
| 45 | Error message area to display errors in red. |
| 48-71 | The buttons representing the calculator keypad. When any keypad button is pressed, the FORM contents are POSTed to the web server for processing. |
Application Processing Logic
<%
'
'********************************************************
' My first web calculator
'
' Author : Elario Belmontes, Jr.
' Description: Four function calculator simulator for
' educational purposes to illustrate the
' use of a web page on a personal web
' server
' Languanges : VBSCRIPT, JAVASCRIPT, JQUERY, HTML, CSS
' File Name : calc_42.asp
' Disclaimer: This software is intended for educational learning
' purposes.
'
' This software is provided "AS IS" and without any
' expressed or implied warranties, including, without
' limitation, the implied warranties of merchantability
' and fitness for a particular purpose.
'
' No guarantee; No warranty; Install / Use at your own risk.
'
'
' Copyright (C) 2015 Larry Belmontes, Jr.
'
'
'
'********************************************************
'
'
'********************************************************
' Declare variables
'********************************************************
Option Explicit
'
Dim myScriptName, myTitle, frm_AuditTape, frm_NumIn, frm_Control, frm_AccumTape, ErrMsg, MaxInput
'
'********************************************************
' Get my script file name
'********************************************************
'
myScriptName = Request.ServerVariables("SCRIPT_NAME")
If Instr(myScriptName, "/") > 0 Then
myScriptName = Right(myScriptName, Len(myScriptName) - instrRev(myScriptName, "/"))
End If
'
'********************************************************
' Process FORM post (i.e. calculator button pressed)
'********************************************************
'
If UCase(Request.ServerVariables("REQUEST_METHOD")) = "POST" Then
'
'********************************************************
' Obtain data from FORM controls
' and initialize variables
'********************************************************
'
myTitle = "myWeb Calculator"
frm_AuditTape = Trim(Request.Form("AuditTape"))
frm_NumIn = Trim(Request.Form("NumIn"))
frm_AccumTape = Trim(Request.Form("AccumTape"))
ErrMsg = " "
MaxInput = 12
'
'********************************************************
' Button on FORM pressed -
' Process number, function or housekeep button on form
'
' Loop through each FORM field and take appropriate
' action from POST data
' (i.e. AuditTape=&AccumTape=&NumIn=&B8=8)
'********************************************************
'
'Response.Write (Request.Form & "<br/>")
'
For each frm_Control in Request.Form
Select Case frm_Control
'
'********************************************************
' Math functions: add, subtract, multiply, divide
'********************************************************
Case "Fplus", "Fminus", "Fmult", "Fdiv"
Call Do_Math
'
'********************************************************
' Terminate Math function: equals
'********************************************************
Case "Fequal"
Call Finalize_Math
'
'********************************************************
' Housekeep: Clear all
'********************************************************
Case "Fclear"
Call Clear_key
'
'********************************************************
' Housekeep: Power Off
'********************************************************
Case "Poff"
Call Power_Off_key
Response.End
'
'********************************************************
' Housekeep: Power On
'********************************************************
Case "Pon"
Call Power_On_key
'
'********************************************************
' Housekeep: Clear entry
'********************************************************
Case "Fcleare"
Call Clear_Entry_key
'
'********************************************************
' Numeric entry
' Limit to 16 digits entry excluding decimal point
'********************************************************
Case "B0", "B1", "B2", "B3", "B4", "B5", "B6", "B7", "B8", "B9"
Call Numeric_key
'
'********************************************************
' Decimal point entry
'********************************************************
Case "Bdot"
Call Decimal_key
End Select
Next
Else
'
'********************************************************
' NOT a POST, initialize session variables
' Assume first time invoked
'********************************************************
Session("NumberIn") = ""
Session("NumberInFunction") = ""
myTitle = "Welcome to myCalculator and happy calculating!"
End If
The code snippet does not include subroutines.
On initial calculator submission, the client PC web browser sends a calc_42.asp URL request to the web server (IIS) via HTTP. The calc_42.asp code starts execution on IIS at line 1 followed by declaration of variables (lines 34-36), setting variable myScriptname (lines 43-45), and first time action logic (lines 137-139). No subroutines (SUB statements) are executed until the <HTML> tag is reached. An HTML response is constructed from code between the <HTML> and </HTML> tags that includes STYLE, JavaScript and FORM code. The HTML response is sent via HTTP to the client PC and rendered by the web browser as an initial calculator page.
On subsequent calculation submission, the client PC web browser posts a calc_42.asp request to the web server (IIS) via HTTP. The calc_42.asp code starts executions on IIS at line 1 followed by declaration of variables (lines 34-36), setting variable myScriptname (lines 43-45), and POST action logic (lines 52-130) processing the appropriate button via the associated subroutine (e.g. Call Numeric_key when key 0-9 is clicked) including the updating of FORM fields. No other subroutines (SUB statements) are executed until the <HTML> tag is reached. An HTML response is constructed from code between the <HTML> and </HTML> tags that includes STYLE, JavaScript and FORM code. The HTML response is sent via HTTP to the client PC and rendered by the web browser as an updated calculator page. Below is a description of VBScript logic for the above snippet.
| Line | Description | ||||||||||||||||||||||||||||||||
| 34-36 | Declare variables | ||||||||||||||||||||||||||||||||
| 52-130 | Logic to execute when post method = POST (keypad button has been pressed) | ||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||
| 131-140 | Logic to execute when post method does not = POST (first time action)
|
Download and Installing ASP VBScript Web Calculator
This application was successfully installed and tested on:
- Windows XP Pro 32-bit, IIS 5, Firefox 36, Chrome v41 , IE 8 (JQuery did not work correctly not allowing simultaneous scrolling in text boxes, but calculator functions were unaffected)
- Windows 7 Home Premium 64-bit,, IIS 7, IE 10, Chrome v41
Other web servers such as Apache with ASP support can be used, but this post is based on Windows IIS.
1. The web server, IIS (Information Internet Services), must be installed with support of ASP (Active Server Pages) on your desktop or laptop computer before attempting to run this web application.
2. Download the ZIP file and extract to a temporary directory.
Download calc_42_asp3. Open the ZIP file and copy the file, calc_42.asp, to the IIS webroot directory.
Typically, the default directory name is c:\Inetpub\wwwroot\
4. Open a browser window (e.g. Internet Explorer or Chrome)
5. Type http://localhost/calc_42.asp in the address bar and press ENTER.
6. The calculator web page should display.
7. On the calculator keyboard –
Click 3. Click +. Click 7. Click /. Click 2. Click =. The result should be 5.
8. Happy calculating!!
Next Learning Experience
Extend the calculator exercise into a PHP (PHP Hypertext PreProcessor) client-server application. PHP is prevalent in today’s web applications such as WordPress and other corporate business web applications.
Developing the calculator logic in PHP will illustrate similarities between PHP and ASP.
Take a look at related posts below!