Sunteți pe pagina 1din 234

Dr.V.

Nagaradjane
Practival Exercises for COPA trade,

2018
Semester 2

Compendium of practical exercises for Computer Operator and


Programming Assistant (COPA) trade, as per the syllabus issued by
National Council for Vocational Training (NCVT) in the year 2014.
Ex. No.: 1
Date: 19.02.2018
AIM: To create a HTML/ Javascript program to add 2 numbers
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad add.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>
Add 2 numbers
</title>
<style>
body {
background-color: #BBFFFF;
color: red;
}
</style>
</head>

<body>
<form name="add" action="#" method="POST">
<center>
<h1>Form for addition of numbers</h1>
<table>
<tr><td>Enter x</td><td>:</td><td><input type="text" name="x"></td></tr>
<tr><td>Enter y</td><td>:</td><td><input type="text" name="y"></td></tr>
<tr><td colspan="3"><center><input type="button" value="Add"
onClick="res.value=Number(x.value)+Number(y.value)"></center></td></tr>
<tr><td>Result</td><td>:</td><td><input type="text" name="res"
readonly></td></tr>
</table>
</center>
</form>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/add.html.
7) Provide input values (256 for x and 145 for y). On pressing Add button,
ensure that the result (401) appears correctly.
2
8) The logic for addition of numbers is presented in flow chart format as
follows:
Start

Input
x and y

Button onClick
res.value = Number(x.value) +
Number(y.value)

Stop
9) Javascript code is filled up using in-line coding style at the onClick option
of the button (single line code).
Ex. No.: 2
Date: 19.02.2018
AIM: To create a HTML/ Javascript program to subtract numbers
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad sub.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>
Subtraction of numbers
</title>
<style>
body {
background-color: #BBBBFF;
color: red;
}
</style>

<script type="text/javascript" language="javascript">


function subFunc() {
var x = document.sub.x.value, y = document.sub.y.value;
x = Number(x); //Convert string value of x to number
3
y = Number(y); /*Convert string value of y to number*/
var z = x - y;
document.sub.res.value = z;
}
</script>
</head>

<body>
<form name="sub" action="#" method="POST">
<center>
<h1>Form for subtraction of numbers</h1>
<table>
<tr><td>Enter x</td><td>:</td><td><input type="text"
name="x"></td></tr>
<tr><td>Enter y</td><td>:</td><td><input type="text"
name="y"></td></tr>
<tr><td colspan="3"><center><input type="button" value="Subtract"
onClick="subFunc()"></center></td></tr>
<tr><td>Result</td><td>:</td><td><input type="text" name="res"
readonly></td></tr>
</table>
</center>
</form>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/sub.html.
7) Provide input values (256 for x and 145 for y). On pressing Subtract
button, ensure that the result (131) appears correctly.
8) If there is any error, press Ctrl+Shift+K. Firefox displays the list of errors.
Read the error messages one by one and rectify the mistakes in the
HTML/ Javascript source file.
9) Press F5 or refresh button in FireFox to display the script after
corrections.
10) Repeat the debugging process till the HTML/ Javascript works correctly.
11) The flow chart for subtraction of numbers is presented as follows:

4
Start

Input
x and y

Button onClick
subFunc is invoked
x = document.sub.x.value
y = document.sub.y.value
x=Number(x); y = Number(y);
z=x-y;
document.sub.res.value = z;

Stop

Ex. No.: 3
Date: 20.02.2018
AIM: To create a HTML/ Javascript program to multiply 2 numbers
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad mult.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>
Multiplication of numbers
</title>
<style>
body {
background-color: #FFBBBB;
color: green;
}
</style>

<script type="text/javascript" language="javascript" src="mult.js">


</script>

</head>

5
<body>
<form name="multForm" action="#" method="POST">
<center>
<h1>Form for multiplication of numbers</h1>
<table>
<tr><td>Enter x</td><td>:</td><td><input type="text"
name="x"></td></tr>
<tr><td>Enter y</td><td>:</td><td><input type="text"
name="y"></td></tr>
<tr><td colspan="3"><center><input type="button" value="Multiply"
onClick="multFunc()"></center></td></tr>
<tr><td>Result</td><td>:</td><td><input type="text" name="res"
readonly></td></tr>
</table>
</center>
</form>
</body>
</html>
6) Type notepad mult.js, press Yes button for confirmation to create new
file, type the following Javascript code and save the contents:
function multFunc()
{
var x = document.multForm.x.value;
var y = document.multForm.y.value;
x = Number(x);
y = Number(y);
var z = x * y;
document.multForm.res.value = z;
}
7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/mult.html.
8) Provide input values (12 for x and 15 for y). On pressing Multiply button,
ensure that the result (300) appears correctly.
9) If there is any error, press Ctrl+Shift+K. Firefox displays the list of errors.
Read the error messages one by one and rectify the mistakes in the HTML/
Javascript source file.
10) Press F5 or refresh button in FireFox to display the script after
corrections.
11) Repeat the debugging process till the HTML/ Javascript works
correctly.
12) The flow chart for subtraction of numbers is presented as follows:

6
Start

Input
x and y

Button onClick
multFunc in mult.js file is invoked
x = document.multForm.x.value
y = document. multForm.y.value
x=Number(x); y = Number(y);
z=x*y;
document. multForm.res.value = z;

Stop

Ex. No.: 4
Date: 20.02.2018
AIM: To create a HTML/ Javascript program for division of numbers
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad div.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>
Division of numbers
</title>
<script type="text/javascript" language="javascript" src="div.js">
</script>
</head>

<body style="background-color:#FFAAFF; color: blue">


<form name="divForm" action="#" method="POST">
<center>
<h1>Form for division of numbers</h1>
<table>
<tr><td>Enter x</td><td>:</td><td><input type="text"
name="x"></td></tr>

7
<tr><td>Enter y</td><td>:</td><td><input type="text"
name="y"></td></tr>
<tr><td colspan="3"><center><input type="button" value="Divide"
onClick="divFunc()"></center></td></tr>
<tr><td>Result</td><td>:</td><td><input type="text" name="res"
readonly></td></tr>
</table>
</center>
</form>
</body>
</html>
6) Type notepad mult.js, press Yes button for confirmation to create new
file, type the following Javascript code and save the contents:
function divFunc()
{
var x = document.divForm.x.value;
var y = document.divForm.y.value;
x = Number(x);
y = Number(y);
if(y == 0) {
alert("Division by zero (0) is not permissible!");
return;
}
var z = x / y;
document.divForm.res.value = z;
}
13) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/div.html.
14) Provide input values (12 for x and 10 for y). On pressing Divide
button, ensure that the result (1.2) appears correctly. If 0 provided against
y, an error message should appear on pressing the Divide button.
15) If there is any error, press Ctrl+Shift+K. Firefox displays the list of
errors. Read the error messages one by one and rectify the mistakes in
the HTML/ Javascript source file.
16) Press F5 or refresh button in FireFox to display the script after
corrections.
17) Repeat the debugging process till the HTML/ Javascript works
correctly.
18) The flow chart for subtraction of numbers is presented as follows:

8
Start

Input
x and y

Button onClick
divFunc in div.js file is invoked
x = document.multForm.x.value
y = document. multForm.y.value
x=Number(x); y = Number(y);
if y=0, display alert; return;
z=x/y;
document. multForm.res.value = z;

Stop

Ex. No.: 5
Date: 20.02.2018
AIM: To create a HTML/ Javascript file to read out a single digit number (using
if condition)
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad read.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Read a single digit number</title>
<script type="text/javascript" language="javascript">
function readFunc()
{
var x = document.readForm.x.value;
x = Number(x);
if(x == 0)
alert("zero");
else if(x == 1)
alert("one");
else if(x == 2)
alert("two");
else if(x == 3)
9
alert("three");
else if(x == 4)
alert("four");
else if(x == 5)
alert("five");
else if(x == 6)
alert("six");
else if(x == 7)
alert("seven");
else if(x == 8)
alert("eight");
else if(x == 9)
alert("nine");
else alert("Enter only 0 to 9");
}
</script>
</head>
<body style="background-color:#66FFFF; color:red">
<form name="readForm" action="#" method="POST">
<center>
<h1>Read a single digit number</h1>
<table>
<tr><td>Enter x</td><td>:</td><td><input type="text" name="x"></td></tr>
</table>
<input type="button" value="Read" onClick="readFunc()">
</center>
</form>
</body>
</html>

6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/read.html.
7) This program uses if condition to read a single digit number. It also
displays the result through an alert function rather than on a text field.
8) Enter a single digit number and verify that the result is displayed properly.
9) Verify that entering anything other than 0 to 9 displays an error message.
Ex. No.: 6
Date: 20.02.2018
AIM: To create a HTML/ Javascript file to display a message based on age of a
person (using if condition)
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
10
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad agemessage.html. Choose YES when notepad seeks
confirmation to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Age message</title>
<script type="text/javascript" language="javascript">
function ageFunc()
{
var age = document.ageForm.x.value;
age = Number(age);
if(age < 13)
document.write("You are a kid!");
else if(age < 20)
document.write("You are a teenager!");
else if(age < 30)
document.write("You are young!");
else if(age < 40)
document.write("You are middle aged!");
else
document.write("You are quiet old!");
}
</script>
</head>
<body style="background-color:#66FFFF; color:red">
<form name="ageForm" action="#" method="POST">
<center>
<h1>Age message</h1>
<table>
<tr><td>Enter age</td><td>:</td><td><input type="text"
name="x"></td></tr>
</table>
<input type="button" value="Get Message" onClick="ageFunc()">
</center>
</form>
</body>
</html>

6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/agemessage.html.
7) This program uses if condition to display a message based on age of a
person. It also uses document.write method to display the message.
11
Ex. No.: 7
Date: 20.02.2018
AIM: To create a HTML/ Javascript file to display a message based on length of
name of a person (using switch ... case ... default condition)
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad namelength.html. Choose YES when notepad seeks
confirmation to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Name message</title>
<script type="text/javascript" language="javascript">
function nameFunc()
{
var name = document.nameForm.name.value;
var len = name.length;
switch(len) {
case 1:
case 2:
case 3:
case 4:
case 5:
document.write("<h1 style='text-align:center; color:red'>Very short
name!</h1>");
break;
case 6:
case 7:
case 8:
case 9:
case 10:
document.write("<h1 style='text-align:center; color:red'>Length of your
name is normal!</h1>");
break;
case 11:
case 12:
case 13:
case 14:
case 15:
document.write("<h1 style='text-align:center; color:red'>Length of your
name is bit too long!</h1>");
12
break;
default:
document.write("<h1 style='text-align:center; color:red'>Length of your
name is too long!</h1>");
}
}
</script>
</head>
<body style="background-color:#66FFFF; color:red">
<form name="nameForm" action="#" method="POST">
<center>
<h1>Name message</h1>
<table>
<tr><td>Enter name</td><td>:</td><td><input type="text"
name="name"></td></tr>
</table>
<input type="button" value="Get Message" onClick="nameFunc()">
</center>
</form>
</body>
</html>

6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/namelength.html.
7) This program uses switch ... case ... default condition to display a message
based on length of name of a person.
Ex. No.: 8
Date: 21.02.2018
AIM: To create a HTML/ Javascript file to display a message based on Body Mass
Index (using ternary operator ? :)
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad bmi.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Test of ternary</title>
<script type="text/javascript" language="javascript">
function bmiMessage() {
var wt = document.bmiForm.wt.value,
13
ht=this.bmiForm.ht.value/100;
//BMI is weight in kg divided by square of height in metre
var bmi=wt/ht/ht;
var mess = "Your BMI is ";
mess += (bmi<=20.3)?"very good!":"very high. You need exercise!"
document.getElementById("res").innerHTML="<h1 style='color:red'>
"+mess+"</h1>";
}
</script>
</head>
<body>
<form name="bmiForm" action="#" method="POST">
<center>
<h1 style='color:red'>Body Mass Index Calculation</h1>
<table>
<tr><td>Enter weight</td><td>:</td> <td><input type="number"
name="wt"></td></tr>
<tr><td>Enter height in centi metre</td><td>:</td> <td> <input
type="number" name="ht"></td></tr>
</table>
<input type="button" value="BMI message" onClick="bmiMessage()">
<span id="res"></span>
</center>
</form>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/bmi.html.
7) This program uses ternary operator (? :), which puts a condition and a
question mark, which is followed by two options for the condition being
true and false (separated by a :).
8) The program displays very good for a person having BMI of 20.3 or less.
Otherwise, it displays the message “Your BMI is very high. You need
exercise.”

Ex. No.: 9
Date: 21.02.2018
AIM: To create a HTML/ Javascript file to calculate sum of first N integers (using
for loop)
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
14
4) Type notepad sum.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Sum of first N numbers</title>
<script type="text/javascript" language="javascript">
function sumFunc()
{
var n = document.sumForm.n.value, sum=0;
n = Number(n);
for(var i=1; i<=n; i++) {
sum += i;
}
document.write("<h1 style='text-align:center; color:red'>Sum of 1+2+..."+ n
+" = "+sum+"</h1>");
}
</script>
</head>
<body style="background-color:#66FFFF; color:red">
<form name="sumForm" action="#" method="POST">
<center>
<h1>Sum of first N numbers</h1>
<table>
<tr><td>Enter number</td><td>:</td><td><input type="number"
name="n"></td></tr>
</table>
<input type="button" value="Sum" onClick="sumFunc()">
</center>
</form>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/sum.html.
7) This program uses for loop to make the variable i to assume values from
1 to given number. For loop has 3 parts: declaration-initialization (var i=1),
condition checking (i<=n) and increment (i++). Each part is separated by a
semi-colon (;).

Ex. No.: 10
Date: 21.02.2018
15
AIM: To create a HTML/ Javascript program to calculate factorial of given
number (using for loop)
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad fact.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Factorial of given number</title>
<script type="text/javascript" language="javascript">
function factFunc()
{
var n = document.factForm.n.value, fact=1;
n = Number(n);

for(var i=2; i<=n; i++) {


fact *= i;
}
document.factForm.res.value = fact;
}
</script>
</head>
<body style="background-color:#66FFFF; color:red">
<form name="factForm" action="#" method="POST">
<center>
<h1>Factorial of given number</h1>
<table>
<tr><td>Enter number</td><td>:</td><td><input type="number"
name="n"></td></tr>
<tr><td colspan=3><center><input type="button" value="Sum"
onClick="factFunc()"></center></td></tr>
<tr><td>Factorial</td><td>:</td><td><input type="text"
name="res"></td></tr>
</table>

</center>
</form>
</body>
</html>

16
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/fact.html.
7) This program uses for loop to make the variable i to assume values from
1 to given number. For loop has 3 parts: declaration-initialization (var i=2),
condition checking (i<=n) and increment (i++). Each part is separated by a
semi-colon (;).
8) Factorial is the multiplication result of all integers between 1 and N (1 x 2
x … x N).

Ex. No.: 11
Date: 23.02.2018
AIM: To create a HTML/ Javascript program to display hexadecimal symbol for
decimal number (using array).
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad hex.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title></title>
<script>
function hexFunc()
{
var hex = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
var x = document.arrayFrm.x.value;
x = Number(x);
if(x<16)
document.getElementById("res").innerHTML = "<h1
style='color:green'> "+x+
"<sub>10</sub> = "+hex[x]+"<sub>16</sub>";
else
document.getElementById("res").innerHTML = "<h1
style='color:red'>Input should be in the range of 0 to 15</h1> ";
}
</script>
</head>
<body>
<form name="arrayFrm" action="#" method="POST">
<center>
<h1 style='color:red'>Get hexa code for decimal number (< 16)</h1>
17
<table>
<tr><td>Enter a number (<16)</td><td>:</td><td><input type="number"
name="x"></td></tr>
</table>
<input type="button" value="Hex code" onClick="hexFunc()">
<span id="res"></span>
</center>
</form>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/hex.html.
7) An array is declared and initialized inside a square bracket. Index values
from 0 to 15 are used to retrieve hexadecimal symbols.
Ex. No.: 12
Date: 23.02.2018
AIM: To create a HTML/ Javascript program to sum and average of given
numbers (using split function and array).
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad avg.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title></title>
<script>
function avgFunc()
{
var x = document.avgFrm.x.value.split(" ");
var sum = 0;
for(var k in x) {
sum += Number(x[k]);
}
var avg = sum/x.length;
document.getElementById("res").innerHTML = "<h1 style='color:green'> sum:
"+sum+"<br />";
document.getElementById("res").innerHTML += "Number of elements:
"+x.length+"<br />";
document.getElementById("res").innerHTML +="Average: "+avg+"</h1>";
}
18
</script>
</head>
<body>
<form name="avgFrm" action="#" method="POST">
<center>
<h1 style='color:red'>Sum and average of numbers</h1>
<table>
<tr><td>Enter numbers (space separated)</td><td>:</td><td><input
type="text" name="x"></td></tr>
</table>
<input type="button" value="Average" onClick="avgFunc()">
<span id="res"></span>
</center>
</form>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/avg.html.
7) The string input is divided in to array elements on occurrence of space
character.
8) Array elements are summed up using for ... in loop, which iterates through
each index element of array.
Ex. No.: 13
Date: 23.02.2018
AIM: To create a HTML/ Javascript program to display marks using associative
array.
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad mark.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title></title>
</head>
<body>
<span id="res"></span>
<script>
var x = {'Tamil':90, 'English':97, 'Maths':100, 'Science':100, 'Social':96};
var total = 0;
document.write( "<h1 style='color:green'> Mark statement</h1>");
19
var i=1;
document.write("<table border=1><tr><th>Sl.
No.</th><th>Subject</th><th>Mark</th></tr>");
for(var s in x) {
document.write("<tr><td>"+i+"</td><td>"+s+"</td><td style='text-
align:right'>"+x[s]+"</td></tr>");
total += Number(x[s]);
i++;
}
document.write("<tr><td colspan=2 style='color:red; text-align:center; font-
weight:bold'>Total</td><td style='color:red;font-weight:bold; text-
align:right'>"+total+"</td></tr>");
document.write("</table>");
</script>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/mark.html.
7) Array elements are summed up using for ... in loop, which iterates through
each index element of array. Instead of a numeric index, the array uses
string (subject name) for key.
Ex. No.: 14
Date: 23.02.2018
AIM: To create a HTML/ Javascript program to display multiplication table using
for loop.
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad table.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript">
function tableFunc() {
var x = prompt("Which table?");
x = Number(x);
document.write("<table>");
for(var i=1; i<=10; i++) {
var res = x*i;

20
document.write("<tr><td>"+i+"</td><td>x</td><td>"+x+"</td><td>=<
/td><td>"+res+"</td></tr>");
}
document.write("</table>");
}
</script>
</head>
<body>
<center>
<input type="button" value="Table" onClick="tableFunc()">
</center>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/table.html.
7) Table elements are displayed using for loop having an index i which
changes from 1 to 10.
Ex. No.: 15
Date: 26.02.2018
AIM: To create a HTML/ Javascript program to display Fibonacci numbers using
while loop.
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad fibo.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Fibonacci series</title>
<script type="text/javascript" language="javascript">
function fiboFunc()
{
var i, x=1, y=1, tmp, n=Number(this.fiboFrm.n.value);
var str = "<h1 style='color:green'>"
if(n==1)
str += x+"<br />";
else if (n>=2)
str += x+"<br />"+y+"<br />";
i=3;
while(i<n) {
tmp = x+y;
21
x = y;
y = tmp;
str += y+"<br />";
i++;
}
str += "</h1>";
document.getElementById("res").innerHTML = str;
}
</script>
</head>
<body>
<form name="fiboFrm" action="#" method="POST">
<center>
<h1 style="color:red">Fibonacci numbers</h1>
<table>
<tr><td>Enter number of terms</td><td>:</td>
<td><input type="text" name="n"></td></tr>
</table>
<input type="button" value="Display" onClick="fiboFunc()"><br>
<span id="res"></span>
</center>
</form>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/fibo.html.
7) If the number of elements required is 1 or 2, the if condition displays the
result. When the number of elements is more than 2, while loop adds x
and y, assigns the result to a temporary variable named tmp. It then
assigns value of y to x, value of tmp to y and displays y.
Ex. No.: 16
Date: 26.02.2018
AIM: To create a HTML/ Javascript program for evaluation of expressions (using
do ... while loop).
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad calc.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
22
<title>Calculation of expression</title>
</head>
<body>
<script type="text/javascript" language="javascript">
var oneMore = true;
do {
var expr = prompt("Enter mathematical expression");
res = eval(expr);
alert(res);
oneMore = confirm("Do you wish to continue evaluation?");
} while(oneMore == true);
</script>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/calc.html.
7) This program uses prompt function to get input, alert function to display
result and confirm function to get choose whether continuation is
required.
Ex. No.: 17
Date: 27.02.2018
AIM: To create a HTML/ Javascript program for using string functions
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad str.html. Choose YES when notepad seeks confirmation to
create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>String functions, Part 1</title>
<script type="text/javascript" language="javascript">
function strFunc() {
var str = this.strFrm.str.value;
var option = document.strFrm.strFnOpt.value;
var result = "<h1 style='color:green'>";
switch(option) {
case "charAt":
var x = prompt("Enter location for charAt");
result += str.charAt(x)+"</h1>";
break;
case "charCodeAt":
23
var x = prompt("Enter location for charCodeAt");
result += str.charCodeAt(x)+"</h1>";
break;
case "concat":
var x = prompt("Enter second string");
result += str.concat(x)+"</h1>";
break;
case "indexOf":
var x = prompt("Enter the secondary string for search index");
result += str.indexOf(x)+"</h1>";
break;
case "lastIndexOf":
var x = prompt("Enter the secondary string for search index");
result += str.lastIndexOf(x)+"</h1>";
break;
case "localeCompare":
var x = prompt("Enter the second string");
result += str.localeCompare(x)+"</h1>";
break;
case "length":
result += str.length+"</h1>";
break;
case "match":
var x = prompt("What to match?");
result += str.match(x)+"</h1>";
break;
case "replace":
var x = prompt("Search string");
var y = prompt("Replacement string");
result += str.replace(x, y)+"</h1>";
break;
case "replace":
var x = prompt("Search string");
var y = prompt("Replacement string");
result += str.replace(x, y)+"</h1>";
break;
case "search":
var x = prompt("Search string");
result += str.search(x)+"</h1>";
break;
case "slice":
var x = prompt("Start point of slice");
var y = prompt("No. of characters to slide");
24
result += str.slice(x, y)+"</h1>";
break;
case "substr":
var x = prompt("Start point of substr");
var y = prompt("No. of characters to substr");
result += str.substr(x, y)+"</h1>";
break;
case "substring":
var x = prompt("Start point of substring");
var y = prompt("End point of substring");
result += str.substring(x, y)+"</h1>";
break;
case "toLowerCase":
result += str.toLowerCase()+"</h1>";
break;
case "toUpperCase":
result += str.toUpperCase()+"</h1>";
break;
case "trim":
result += "::"+str.trim()+"::</h1>";
break;
case "trimLeft":
result += "::"+str.trimLeft()+"::</h1>";
break;
case "trimRight":
result += "::"+str.trimRight()+"::</h1>";
break;

}
document.getElementById("res").innerHTML = result;
}
</script>
</head>
<body>
<form name="strFrm" action="#" method="POST">
<center>
<h1 style="color:red">String functions, Part 1</h1>
<table>
<tr><td>Input string</td><td>:</td><td><input type="text"
name="str"></td></tr>
<tr><td>Select function</td><td>:</td><td>
<select name="strFnOpt">
<option value="charAt">charAt</option>
25
<option value="charCodeAt">charCodeAt</option>
<option value="concat">concat</option>
<option value="indexOf">indexOf</option>
<option value="lastIndexOf">lastIndexOf</option>
<option value="localeCompare">localeCompare</option>
<option value="length">length</option>
<option value="match">match</option>
<option value="replace">replace</option>
<option value="search">search</option>
<option value="slice">slice</option>
<option value="substr">substr</option>
<option value="substring">substring</option>
<option value="toLowerCase">toLowerCase</option>
<option value="toUpperCase">toUpperCase</option>
<option value="trim">trim</option>
<option value="trimLeft">trimLeft</option>
<option value="trimRight">trimRight</option>
</select>
</td></tr>
</table>
<input type="button" value="Process" onClick="strFunc()">
<span id="res"></span>
</center>
</form>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/str.html.
Ex. No.: 18
Date: 27.02.2018
AIM: To convert decimal number to binary number
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad dec2bin.html. Choose YES when notepad seeks
confirmation to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Decimal to binary</title>
<script type="text/javascript" language="javascript">
function dec2binFunc() {
26
var x = document.dec2binFrm.x.value;
var base=2, rem;
var result = "";
while(x>0) {
rem = x%base;
result = ""+rem+result;
x = (x-rem)/base;
}
document.getElementById("res").innerHTML = "<h1
style='color:green'>"+document.dec2binFrm.x.value+"<sub>10</sub> =
"+result+"<sub>2</sub></h1>";
}
</script>
</head>
<body>
<form name="dec2binFrm" action="#" method="POST">
<center>
<h1 style='color:red'>Decimal to binary</h1>
<table>
<tr><td>Enter decimal number</td><td>:</td><td><input type="number"
name="x"></td></tr>
</table>
<input type="button" value="Convert" onClick="dec2binFunc()">
<span id="res"></span>
</form>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/dec2bin.html.
7) Given decimal number is converted to binary by successive division using
2 (the target base number).
Ex. No.: 19
Date: 28.02.2018
AIM: To convert binary number to decimal number
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad bin2dec.html. Choose YES when notepad seeks
confirmation to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
27
<title>Binary to decimal</title>
<script type="text/javascript" language="javascript">
function bin2decFunc() {
var x = document.bin2decFrm.x.value;
var base=2, rem;
var result = 0;
var i=0;
while(x>0) {
rem = x%base;
result += rem*Math.pow(base,i++);
x = (x-rem)/10;
}
document.getElementById("res").innerHTML = "<h1
style='color:green'>"+document.bin2decFrm.x.value+"<sub>2</sub> =
"+result+"<sub>10</sub></h1>";
}
</script>
</head>
<body>
<form name="bin2decFrm" action="#" method="POST">
<center>
<h1 style='color:red'>Binary to decimal</h1>
<table>
<tr><td>Enter binary number</td><td>:</td><td><input type="number"
name="x"></td></tr>
</table>
<input type="button" value="Convert" onClick="bin2decFunc()">
<span id="res"></span>
</form>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/bin2dec.html.
7) Given binary number is converted to decimal number by multiplication of
the last digit of binary using 2 raised to power place value (0,1,2,3,...).
8) The product is added to result.
9) The integer remainder of division by 2 is used as the new number to apply
steps 7 and 8.
Ex. No.: 20
Date: 28.02.2018
AIM: To convert decimal number to octal number
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
28
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad dec2oct.html. Choose YES when notepad seeks
confirmation to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Decimal to octal</title>
<script type="text/javascript" language="javascript">
function dec2octFunc() {
var x = document.dec2octFrm.x.value;
var num = x;
var base=8, rem;
var result = "";
while(x>0) {
rem = x%base;
result = ""+rem+result;
x = (x-rem)/base;
}
document.getElementById("res").innerHTML = "<h1
style='color:green'>"+num+"<sub>10</sub> =
"+result+"<sub>"+base+"</sub></h1>";
}
</script>
</head>
<body>
<form name="dec2octFrm" action="#" method="POST">
<center>
<h1 style='color:red'>Decimal to octal</h1>
<table>
<tr><td>Enter decimal number</td><td>:</td><td><input type="number"
name="x"></td></tr>
</table>
<input type="button" value="Convert" onClick="dec2octFunc()">
<span id="res"></span>
</form>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/dec2oct.html.
7) Given decimal number is converted to binary by successive division using
8 (the target base number) and the integer remainder is used for next
iteration.
29
Ex. No.: 21
Date: 28.02.2018
AIM: To convert octal number to decimal number
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad oct2dec.html. Choose YES when notepad seeks
confirmation to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Octal to decimal</title>
<script type="text/javascript" language="javascript">
function oct2decFunc() {
var x = document.oct2decFrm.x.value;
var num = x;
var base=8, rem;
var result = 0;
var i=0;
while(x>0) {
rem = x%10;
result += rem*Math.pow(base,i++);
x = (x-rem)/10;
}
document.getElementById("res").innerHTML = "<h1
style='color:green'>"+num+"<sub>"+base+"</sub> =
"+result+"<sub>10</sub></h1>";
}
</script>
</head>
<body>
<form name="oct2decFrm" action="#" method="POST">
<center>
<h1 style='color:red'>Octal to decimal</h1>
<table>
<tr><td>Enter binary number</td><td>:</td><td><input type="number"
name="x"></td></tr>
</table>
<input type="button" value="Convert" onClick="oct2decFunc()">
<span id="res"></span>
</form>
</body>
30
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/oct2dec.html.
7) Given octal number is converted to decimal number by multiplication of
the last digit of octal using 8 raised to the power of place value (0,1,2,3,...).
8) The product is added to the result.
9) The integer remainder of division using 8 is used as the new number for
applying steps 7 and 8.
Ex. No.: 22
Date: 28.02.2018
AIM: To convert decimal number to hexadecimal number
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad dec2hex.html. Choose YES when notepad seeks
confirmation to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Decimal to hexadecimal</title>
<script type="text/javascript" language="javascript">
function dec2hexFunc() {
var hexChar = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
var x = document.dec2hexFrm.x.value;
var num = x;
var base=16, rem;
var result = "";
while(x>0) {
rem = x%base;
result = ""+hexChar[rem]+result;
x = (x-rem)/base;
}
document.getElementById("res").innerHTML = "<h1
style='color:green'>"+num+"<sub>10</sub> =
"+result+"<sub>"+base+"</sub></h1>";
}
</script>
</head>
<body>
<form name="dec2hexFrm" action="#" method="POST">
<center>
<h1 style='color:red'>Decimal to hexadecimal</h1>
31
<table>
<tr><td>Enter decimal number</td><td>:</td><td><input type="number"
name="x"></td></tr>
</table>
<input type="button" value="Convert" onClick="dec2hexFunc()">
<span id="res"></span>
</form>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/dec2oct.html.
7) Given decimal number is converted to binary by successive division using
16 (the target base number).
8) An array named hexChar contains the hexadecimal values from 0 to F.
9) The integer remainder of division by 16 (may range from 0 to 15) is placed
in the index of hexChar array to get equivalent hexadecimal digit.
Ex. No.: 23
Date: 28.02.2018
AIM: To convert hexadecimal number to decimal number
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad hex2dec.html. Choose YES when notepad seeks
confirmation to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Hexal to decimal</title>
<script type="text/javascript" language="javascript">
function hex2decFunc() {
var hexChar = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
var x = document.hex2decFrm.x.value;
var num = x;
var base=16, rem;
var result = 0;
var i=0;
while(x.length>0) {
rem = x.charAt(x.length-1);
rem = hexChar.indexOf(rem);
result += rem*Math.pow(base,i++);
x = x.substring(0,x.length-1);
}
32
document.getElementById("res").innerHTML = "<h1
style='color:green'>"+num+"<sub>"+base+"</sub> =
"+result+"<sub>10</sub></h1>";
}
</script>
</head>
<body>
<form name="hex2decFrm" action="#" method="POST">
<center>
<h1 style='color:red'>Hexal to decimal</h1>
<table>
<tr><td>Enter binary number</td><td>:</td><td><input type="text"
name="x"></td></tr>
</table>
<input type="button" value="Convert" onClick="hex2decFunc()">
<span id="res"></span>
</form>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/hex2dec.html.
7) Given hexadecimal number is converted to decimal number by
multiplication of the last digit using 16 raised to power of place value (0,
1, 2, ...).
8) The hexadecimal digit (0 ... F) is converted to decimal number by calling
indexOf method on the array hexChar which contains hexadecimal digits
from 0 to F.
9) The product of multiplication is added to the result.
10) The last digit of the hexadecimal number is removed (using substring
function) to get the new number iteration of for steps 7 to 9.
Ex. No.: 24
Date: 02.03.2018
AIM: To control document colors using Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad color.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Color selection</title>
33
<script type="text/javascript" language="javascript">
function setColor()
{
document.bgColor = document.colorFrm.bg.value;
document.getElementById("header").style.color =
document.colorFrm.tc.value;
document.fgColor = document.colorFrm.txt.value;
}
</script>
</head>
<body>
<form name="colorFrm" action="#" method="POST">
<center>
<span id="header"><h1>Color selection</h1></span>
<table>
<tr><td>Background color</td><td>:</td>
<td><input type="color" name="bg"></td></tr>
<tr><td>Title color</td><td>:</td>
<td><input type="color" name="tc"></td></tr>
<tr><td>Text color</td><td>:</td>
<td><input type="color" name="txt"></td></tr>
</table>
<input type="button" value="Apply" onClick="setColor()">
</center>
</form>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/color.html.
7) Input type of color in HTML displays a button on clicking which a color
selection dialog.
8) Background color may be set using document.bgColor, foreground color
may be set using document.fgColor.
9) Selected color is accessible through value property of input object.
Ex. No.: 25
Date: 05.03.2018
AIM: To use math functions in Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad math.html. Choose YES when notepad seeks confirmation
to create a new file.
34
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Math functions in Javascript</title>
<script type="text/javascript" language="javascript" src="math.js">
</script>
</head>
<body style="background:#CCFFCC; color:red; font-size:150%">
<form name="mathFrm" action="#" method="POST">
<center>
<h1 style="text-align:center;color:blue">Math functions</h1>
<table>
<tr><td>Enter a number</td><td>:</td><td><input type="text"
name="x"></td></tr>
</table>
<input type="radio" name="mathOpt" value="abs">abs
<input type="radio" name="mathOpt" value="acos">acos<br />
<input type="radio" name="mathOpt" value="acosh">acosh
<input type="radio" name="mathOpt" value="asin">asin<br />
<input type="radio" name="mathOpt" value="asinh">asinh
<input type="radio" name="mathOpt" value="atan">atan<br />
<input type="radio" name="mathOpt" value="atan2">atan2
<input type="radio" name="mathOpt" value="atanh">atanh<br />
<input type="radio" name="mathOpt" value="cbrt">cbrt
<input type="radio" name="mathOpt" value="ceil">ceil<br />
<input type="radio" name="mathOpt" value="cos">cos
<input type="radio" name="mathOpt" value="cosh">cosh<br />
<input type="radio" name="mathOpt" value="exp">exp
<input type="radio" name="mathOpt" value="floor">floor<br />
<input type="radio" name="mathOpt" value="log">log
<input type="radio" name="mathOpt" value="max">max<br />
<input type="radio" name="mathOpt" value="min">min
<input type="radio" name="mathOpt" value="pow">pow<br />
<input type="radio" name="mathOpt" value="random">random
<input type="radio" name="mathOpt" value="round">round<br />
<input type="radio" name="mathOpt" value="sin">sin
<input type="radio" name="mathOpt" value="sinh">sinh<br />
<input type="radio" name="mathOpt" value="sqrt">sqrt
<input type="radio" name="mathOpt" value="tan">tan
<input type="radio" name="mathOpt" value="trunc">trunc<br />
<input type="button" value="Calculate" onClick="mathFunc()"><br />
<span id="res"></span>
</center>
35
</form>
</body>
</html>
6) After typing the HTML content, type notepad math.js. Choose YES to
create a new file. Type the following code and save:

function mathFunc()
{
var choice = document.mathFrm.mathOpt.value;
var x = document.mathFrm.x.value;

switch(choice) {
case "abs": //No additional parameter
var r = Math.abs(x);
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.abs("+x+") = "+r+"</h1>";
break;
case "acos": //No additional parameter
var r = Math.acos(x)*180/Math.PI;
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.acos("+x+") = "+r+"</h1>";
break;
case "acosh": //No additional parameter
var r = Math.acosh(x)*180/Math.PI;
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.acosh("+x+") = "+r+"</h1>";
break;
case "asin": //No additional parameter
var r = Math.asin(x)*180/Math.PI;
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.asin("+x+") = "+r+"</h1>";
break;
case "asinh": //No additional parameter
var r = Math.asinh(x)*180/Math.PI;
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.asinh("+x+") = "+r+"</h1>";
break;
case "atan": //No additional parameter
var r = Math.atan(x)*180/Math.PI;
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.atan("+x+") = "+r+"</h1>";
break;
case "atan2": //No additional parameter
36
var y = prompt("Enter y for atan2");
var r = Math.atan2(x,y)*180/Math.PI;
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.asin("+x+") = "+r+"</h1>";
break;
case "atanh": //No additional parameter
var r = Math.atanh(x)*180/Math.PI;
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.atanh("+x+") = "+r+"</h1>";
break;
case "cbrt": //No additional parameter
var r = Math.cbrt(x);
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.cbrt("+x+") = "+r+"</h1>";
break;
case "ceil": //No additional parameter
var r = Math.ceil(x);
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.ceil("+x+") = "+r+"</h1>";
break;
case "cos": //No additional parameter
var r = Math.cos(x*Math.PI/180);
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.cos("+x+") = "+r+"</h1>";
break;
case "cosh": //No additional parameter
var r = Math.cosh(x*Math.PI/180);
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.cosh("+x+") = "+r+"</h1>";
break;
case "exp": //No additional parameter
var r = Math.exp(x);
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.exp("+x+") = "+r+"</h1>";
break;
case "floor": //No additional parameter
var r = Math.floor(x);
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.floor("+x+") = "+r+"</h1>";
break;
case "log": //No additional parameter
var r = Math.log(x);

37
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.floor("+x+") = "+r+"</h1>";
break;
case "max": //3 additional parameter
var y = prompt("Number for max"),
z=prompt("Number for max"), a=prompt("Number for
max");
var r = Math.max(x, y, z, a);
document.getElementById("res").innerHTML =
"<h1 style='color:red'>Math.abs("+x+","+y+","+z+","+a+")
= "+r+"</h1>";
break;
case "min": //3 additional parameter
var y = prompt("Number for min"),
z=prompt("Number for min"), a=prompt("Number for
min");
var r = Math.max(x, y, z, a);
document.getElementById("res").innerHTML =
"<h1 style='color:red'>Math.min("+x+","+y+","+z+","+a+")
= "+r+"</h1>";
break;
case "pow": //One additional parameter
var y = prompt("Enter power");
var r = Math.pow(x,y);
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.pow("+x+","+y+") = "+r+"</h1>";
break;
case "random": //No additional parameter
var r = Math.random();
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.random() = "+r+"</h1>";
break;
case "round": //No additional parameter
var r = Math.round();
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.round() = "+r+"</h1>";
break;
case "sin": //No additional parameter
var r = Math.sin(x*Math.PI/180);
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.sin("+x+") = "+r+"</h1>";
break;
case "sinh": //No additional parameter
38
var r = Math.sinh(x*Math.PI/180);
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.sinh("+x+") = "+r+"</h1>";
break;
case "sqrt": //No additional parameter
var r = Math.sqrt(x);
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.sqrt("+x+") = "+r+"</h1>";
break;
case "tan": //No additional parameter
var r = Math.tan(x*Math.PI/180);
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.tan("+x+") = "+r+"</h1>";
break;
case "trunc": //No additional parameter
var r = Math.trunc(x);
document.getElementById("res").innerHTML = "<h1
style='color:red'>Math.trunc("+x+") = "+r+"</h1>";
break;
}
}
7) The above Javascript file provides Math implementation for just a few
functions. Apply your mind to create code for all Math functions.
8) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/math.html.
9) Enter a number in the input text box. Choose a function from radio
buttons. Press Calculate.
10) Verify the result displayed against standard results. Make corrections if
necessary.
Ex. No.: 26
Date: 06.03.2018
AIM: To calculate sum of squares of series of Integers
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad sumsq.html. Choose YES when notepad seeks
confirmation to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Sum of squares of first N numbers</title>

39
<script type="text/javascript" language="javascript"
src="sumsq.js"></script>
</head>
<body style="background:#FFCCCC; color:blue">
<form name="sqFrm" action="#" method="POST">
<center>
<h1>Sum of squares of first N numbers</h1>
<table>
<tr><td>Enter N</td><td>:</td><td><input type="text"
name="n"></td></tr>
</table>
<input type="button" value="Sum of square" onClick="sumSq()">
<span id="res"></span>
</center>
</form>
</body>
</html>
6) After typing the HTML content, type notepad math.js. Choose YES to
create a new file. Type the following code and save:
function sumSq()
{
var n = Number(document.sqFrm.n.value);
var sum = 0;
for(var i=1; i<=n; i++)
sum += Math.pow(i,2);
document.getElementById("res").innerHTML = "<h1
style='color:green'>1<sup>2</sup>+...+"+n+"<sup>2</sup> =
"+sum+"</h1>";
}
7) The above Javascript file provides code for calculating the sum of squares
of first N integers using Math.pow function.
8) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/sumsq.html.
9) Enter a number in the input text box. On pressing Calculate sum of
squares button, sumSq function is invoked to calculate the result.
10) Verify the result displayed against standard results.
Ex. No.: 27
Date: 06.03.2018
AIM: To calculate sum of cubes of series of Integers
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
40
4) Type notepad sumcb.html. Choose YES when notepad seeks
confirmation to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Sum of cubes of first N numbers</title>
<script type="text/javascript" language="javascript"
src="sumcb.js"></script>
</head>
<body style="background:#FFCCCC; color:blue">
<form name="cbFrm" action="#" method="POST">
<center>
<h1>Sum of cubes of first N numbers</h1>
<table>
<tr><td>Enter N</td><td>:</td><td><input type="text"
name="n"></td></tr>
</table>
<input type="button" value="Sum of cubes" onClick="sumCb()">
<span id="res"></span>
</center>
</form>
</body>
</html>
6) After typing the HTML content, type notepad subcb.js. Choose YES to
create a new file. Type the following code and save:
function sumCb()
{
var n = Number(document.cbFrm.n.value);
var sum = 0;
for(var i=1; i<=n; i++)
sum += Math.pow(i,3);
document.getElementById("res").innerHTML = "<h1
style='color:green'>1<sup>3</sup>+...+"+n+"<sup>3</sup> =
"+sum+"</h1>";
}
7) The above Javascript file provides code for calculating the sum of cubes
of first N integers using Math.pow function.
8) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/sumcb.html.
9) Enter a number in the input text box. On pressing Calculate sum of cubes
button, sumCb function is invoked to calculate the result.
10) Verify the result displayed against standard results.

41
Ex. No.: 28
Date: 07.03.2018
AIM: To display digital clock
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad digiclock.html. Choose YES when notepad seeks
confirmation to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Digital clock</title>
<script type="text/javascript" language="javascript">
function digiClock()
{
var dt = new Date();
var h = dt.getHours(), m = dt.getMinutes(), s = dt.getSeconds();
var time = "<h1 style='font-size:400%'><span style='color:red'>"+h+
"h: </span><span style='color:blue'>"+m+
"m: </span><span style='color:green'>"+s+"s</span></h1>";
document.getElementById("digi").innerHTML = time;
}
</script>
</head>
<body>
<center>
<span id="digi"></span>
</center>
<script type="text/javascript" language="javascript">
setInterval(digiClock,1000);
</script>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/digiclock.html.
7) The setInterval method in body section invokes digiClock function every
1000 milliseconds (1 second).
8) The digiClock function creates a date object named dt and uses getHours,
getMinutes and getSeconds functions to extract hour, minute and
seconds of time.

42
Ex. No.: 29
Date: 07.03.2018
AIM: To display digital stop watch
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad stopwatch.html. Choose YES when notepad seeks
confirmation to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Stop watch</title>
<script type="text/javascript" language="javascript" src="stopwatch.js">
</script>
</head>
<body>
<center>
<h1 style="color:red">Stop watch</h1>
<span id="time"></span>
<input type="button" value="Start" onClick="start()">
<input type="button" value="Stop" onClick="stop()">
</center>
</body>
</html>
6) Then, type notepad stopwatch.js in the command prompt, enter the
following script and save the file:
var run = null;
var time = 0;

function clock() {
var tm = new Date();
var i = tm.getTime() - time;
var ms = i%1000;
i-=ms;
var s = (i/1000)%60;
i-=s*1000;
var m = (i/1000/60)%60;
i-=m*60*1000;
var h = i/1000/60/60;
document.getElementById("time").innerHTML = "<h1><span
style='color:blue;'>"+h+

43
"h: </span><span style='color:green'>"+m+"m: </span><span
style='color:red'>"+
s+"."+ms+"s</span></h1>";
}

function start()
{
time = new Date().getTime();
run = setInterval(clock, 1);
}

function stop()
{
clearInterval(run);
}
7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/stopwatch.html.
8) The setInterval method in body section invokes clock function every
milliseconds (1/1000 of a second).
9) The start function saves the start time in variable named time.
10) The clock function calculates the difference between current time and
start time, converts the interval (in milliseconds) to milliseconds,
seconds, minutes and hours and displays the same.
Ex. No.: 30
Date: 07.03.2018
AIM: To display results of Date functions in Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad date.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Date functions</title>
<script type="text/javascript" language="javascript" src="date.js">
</script>
</head>
<body style="background:#AAFFAA">
<form name="dtFrm" action="#" method="POST">
<center>
<h1 style="color:red">Time functions</h1>
44
<select name="dtOpt" size="4">
<option value="getDate">getDate</option>
<option value="getDay">getDay</option>
<option value="getFullYear">getFullYear</option>
<option value="getHours">getHours</option>
<option value="getMilliseconds">getMilliseconds</option>
<option value="getMinutes">getMinutes</option>
<option value="getMonth">getMonth</option>
<option value="getSeconds">getSeconds</option>
<option value="getTime">getTime</option>
<option value="getTimezoneOffset">getTimezoneOffset</option>
<option value="getUTCDate">getUTCDate</option>
<option value="getUTCFullYear">getUTCFullYear</option>
<option value="getUTCHours">getUTCHours</option>
<option value="getUTCSeconds">getUTCSeconds</option>
<option value="getYear">getYear</option>
<option value="toDateString">toDateString</option>
<option value="toLocaleString">toLocaleString</option>
<option value="toString">toString</option>
</select><br />
<input type="button" value="Process" onClick="process()"><br />
<span id="res"></span>
</center>
</form>
</body>
</html>
6) Then, type notepad date.js in the command prompt, enter the following
script and save the file:
function process()
{
var opt = document.dtFrm.dtOpt.value;
var d = new Date();
var s = "<h1 style='color:red'>";
switch(opt) {
case "getDate":
s += d.getDate()+"</h1>";
break;
case "getDay":
s += d.getDay()+"</h1>";
break;
case "getFullYear":
s += d.getFullYear()+"</h1>";
break;
45
}
document.getElementById("res").innerHTML = s;
}
7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/date.html.
8) Select a function from the list of date functions.
9) Click the Process button.
10) Verify that appropriate values are displayed on screen.
Ex. No.: 31
Date: 08.03.2018
AIM: To display the functioning of arithmetic operators in Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad operator.html. Choose YES when notepad seeks
confirmation to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Operators in Javascript</title>
</head>
<script type="text/javascript" language="javascript">
var i=5;
alert("Initial value of i: "+i);
alert("i with postfix increment: "+ i++); // i becomes 6 at the end of line
alert("i with prefix increment: "+ ++i); // i becomes 7 at the beginning of line
i+=12;// i becomes 19; because 7+12 = 19
alert("i += 12: "+ i);
i-=4; // i becomes 15; because 19-4 = 15
alert("i -= 5: "+ i);
i*=5; // i becomes 75; because 15*5 = 75
alert("i *= 5: "+ i);
i/=25; // i becomes 5; because 75/25 = 3
alert("i /= 25: "+ i);
i**=2; // i becomes 9; because 3^2 = 9
alert("i **= 2: "+ i);
var res = i==="9"; // Compare the values and data types of i and "9". It is false.
alert("i==='9': "+res);
res = i=="9"; // Compare just the values of i and "9". It is true.
alert("i==\"9\": "+res);
</script>
</html>
46
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/operator.html.
7) A series messages appears to show the current value of variable i after
the application of several operators.
Ex. No.: 32
Date: 08.03.2018
AIM: To display the functioning of arithmetic operators in Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad changer.html. Choose YES when notepad seeks
confirmation to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>I change as you move</title>
<script type="text/javascript" language="javascript">
function enter() {
document.getElementById("flower").src = "rose.jpg";
}
function exit() {
document.getElementById("flower").src = "garden.jpg";
}
function click() {
document.getElementById("flower").src = "orchid.jpg";
}
function dblClick() {
document.getElementById("flower").src = "lilly.jpg";
}

</script>
</head>
<body>
<center>
<img width="100%" height="100%" id="flower" src="garden.jpg"
onDblClick="dblClick()"
onMouseOver="enter()"
onMouseOut="exit()"
onClick="click()"
>
</center>
</body>
47
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/changer.html.
7) The image of a garden appears by default. When the mouse enters, click
or double clicks, the image changes according to the gesture.
Ex. No.: 33
Date: 09.03.2018
AIM: To display a gallery of images using Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad gallery.html. Choose YES when notepad seeks
confirmation to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<html>
<title>Image gallery</title>
<script>
var i=1;
var interval = 1000;
var tmp = null;

function timing() {
if(tmp != null)
clearInterval(tmp);
tmp = setInterval(galFunction, document.getElementById("delay").value);
}

function galFunction() {
document.getElementById("gallery").src = (i++)+".jpg";
i%=13;
if(i==0)
i=1;
}
</script>
</html>
<body>
<center>
<input type="number" id="delay" value=1000>
<input type="button" value="Change timing" onClick="timing()">
<img width="100%" height="90%" src="1.jpg" id="gallery">

48
<script type="text/javascript" language="javascript">
timing();
</script>
</center>
</body>
</html>
6) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/gallery.html.
7) Adjust the time day in milliseconds. Press the Change timing button.
Verify that the gallery changes images at specified interval.
Ex. No.: 34
Date: 12.03.2018
AIM: To draw shapes and text using Canvas object
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad draw.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Draw</title>
</head>
<html>
<body>
<center>
<input type="button" value="Circle" onClick="drawCircle()">
<input type="button" value="Filled circle" onClick="fillCircle()">
<input type="button" value="Line" onClick="drawLine()">
<input type="button" value="Text" onClick="drawText()">
<canvas id="canvas">
</canvas>
</center>
<script type="text/javascript" language="javascript" src="draw.js">
</script>
</body>
</html>
</html>
6) Then, type notepad draw.js in the command line. Type the following
script and save.
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");
49
var w = window.innerWidth, h = window.innerHeight;
can.width = w;
can.height = h;

ctx.font = "24pt Calibri";


ctx.textAlign="center";
ctx.fillStyle = "#660000";
ctx.fillText(w+"x"+h,w/2,24);

function drawCircle()
{
var rad = prompt("Enter radius");
ctx.beginPath();
ctx.arc(w/2, h/2, rad, 0,2*Math.PI);
ctx.stroke();
}

function fillCircle()
{
var rad = prompt("Enter radius"),
c = prompt("Enter fill color");

ctx.beginPath();
ctx.fillStyle = c;
ctx.arc(w/2, h/2, rad, 0,2*Math.PI);
ctx.fill();
}

function drawLine()
{
var sx = prompt("Enter start x"),
sy = prompt("Enter start y"),
ex = prompt("Enter end x"),
ey = prompt("Enter end y");
ctx.beginPath();
ctx.moveTo(sx, sy);
ctx.lineTo(ex, ey);
ctx.stroke();
}

function drawText()
{
50
var txt = prompt("Enter text"),
x = prompt("Enter x"),
y = prompt("Enter y"),
c = prompt("Enter color"),
s = prompt("Enter font size"),
n = prompt("Enter font name");
ctx.textAlign="center";
ctx.fillStyle = c;
ctx.font = s+"px "+n;
ctx.fillText(txt,x,y);
}
After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/clock.html. Verify that the clock shows the system
time.
Ex. No.: 35
Date: 12.03.2018
AIM: To create analog clock using Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad clock.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Analog clock</title>
</head>
<html>
<body>
<center>
<canvas id="clk" width="600" height="600">
</canvas>
</center>
<script type="text/javascript" language="javascript" src="clock.js">
</script>
<script type="text/javascript" language="javascript">
setInterval(clock,1000);
</script>
</body>
</html>
</html>

51
6) Then, type notepad clock.js in the command line. Type the following
script and save.
var can = document.getElementById("clk");
var ctx = can.getContext("2d");
var w = window.innerWidth*0.45, h = window.innerHeight*0.45;
var rad = (w<h)?w:h;
can.width = can.height = rad*2;
ctx.translate(rad, rad);
rad *= 0.9;
function clock()
{
drawCircle();
drawBrim();
drawNumbers();
drawTime();
}
function drawCircle()
{
ctx.beginPath();
ctx.arc(0,0,rad,0,2*Math.PI);
ctx.fillStyle="#FFFFAA";
ctx.fill();
}
function drawBrim() {
var gr = ctx.createRadialGradient(0,0,rad*0.95,0,0,rad*1.05);
gr.addColorStop(0,"#FFAAFF");
gr.addColorStop(0.5,"#FFFFFF");
gr.addColorStop(1,"#FFAAFF");
ctx.strokeStyle = gr;
ctx.lineWidth = rad*0.1;
ctx.stroke();
}
function drawNumbers() {
ctx.fillStyle = "#FF0000"
ctx.font = rad*0.2 + "px calibri";
ctx.setBaseline = "middle";
ctx.textAlign = "center";
for(var i=1; i<=12; i++) {
var ang = i*Math.PI/6;
ctx.rotate(ang);
ctx.translate(0,-rad*(i>=3&&i<=9?0.9:0.8));
ctx.rotate(-ang);
ctx.fillText(i.toString(), 0, 0);
52
ctx.rotate(ang);
ctx.translate(0,rad*(i>=3&&i<=9?0.9:0.8));
ctx.rotate(-ang);
}
ctx.fillStyle="#0000FF";
ctx.font = rad*0.2 + "px Calibri";
ctx.setBaseline = "middle";
ctx.textAlign = "center";
ctx.fillText("COPA",0,-rad*0.3);
}
function drawTime()
{
var dt = new Date();
var h = dt.getHours()%12, m = dt.getMinutes(), s = dt.getSeconds();
s *= Math.PI/30;
m = m*Math.PI/30+s/60;
h = h*Math.PI/6+m/12;
drawHand(m, rad*0.6, rad*0.04, "#00FF00");
drawHand(s, rad*0.75, rad*0.02, "#FF0000");
drawHand(h, rad*0.45, rad*0.08, "#0000FF");
ctx.beginPath();
ctx.arc(0,0,rad*0.05,0,2*Math.PI);
ctx.fillStyle = "#000000";
ctx.fill();
}
function drawHand(s, l, w, c)
{
ctx.beginPath();
ctx.lineWidth = w;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(s);
ctx.lineTo(0,l);
ctx.strokeStyle = c;
ctx.stroke();
ctx.rotate(-s);
}
7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/clock.html. Verify that the clock shows the
system time.

Ex. No.: 36
Date: 13.03.2018
53
AIM: To create column chart using Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad col.html. Choose YES when notepad seeks confirmation to
create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Column chart</title>
</head>
<html>
<body>
<center>
<input type="text" id="nm" placeholder="Name">
<input type="text" id="val" placeholder="Value">
<input type="color" id="c">
<input type="button" value="Add" onClick="addValues()">
<canvas id="canvas">
</canvas>
</center>
<script type="text/javascript" language="javascript" src="col.js">
</script>
</body>
</html>
</html>
6) Then, type notepad col.js in the command line. Type the following script
and save.
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");

var w = window.innerWidth, h = window.innerHeight;


can.width = w;
can.height = h;

var n = [], v = [], c = [];


var cnt=0;
var max = -1;

function addValues()
{
n[cnt] = document.getElementById("nm").value;
54
v[cnt] = document.getElementById("val").value;
if(max<v[cnt])
max = v[cnt];
c[cnt++] = document.getElementById("c").value;
drawCol();
}

function drawCol()
{
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0,0,w,h);
for(var i=0; i<cnt; i++) {
ctx.beginPath();
var colWidth = (w-(cnt+1)*20)/cnt;
ctx.lineWidth = colWidth;
ctx.strokeStyle = c[i];
var yh = (h-60)/max*v[i];
var x1 = (20+colWidth)*i+20+colWidth/2,
y1 = h-20, x2 = x1, y2 = h-20-yh;
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
ctx.fillStyle = c[i];
ctx.textAlign = "center";
ctx.font = "16pt Calibri";
ctx.fillText(n[i],(20+colWidth)*i+colWidth/2+20,h-20-yh-5);
}
ctx.font = "18pt Calibri";
ctx.textAlign="center";
ctx.fillStyle = "#FF0000";
ctx.fillText("Column chart",w/2,h);
}
7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/col.html.
8) Enter a name, value and choose a colour. Press Add button and the value
begins to appear under column chart section.
9) Create a column chart of your choice with at least 5 columns.
Ex. No.: 37
Date: 13.03.2018
AIM: To create pie chart using Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
55
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad pie.html. Choose YES when notepad seeks confirmation to
create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Column chart</title>
</head>
<html>
<head>
<title>Pie chart</title>
</head>
<html>
<body>
<center>
<input type="text" id="nm" placeholder="Name">
<input type="text" id="val" placeholder="Value">
<input type="color" id="c">
<input type="button" value="Add" onClick="addValues()">
<canvas id="canvas">
</canvas>
</center>
<script type="text/javascript" language="javascript" src="pie.js">
</script>
</body>
</html>
</html>
6) Then, type notepad pie.js in the command line. Type the following script
and save:
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");

var w = window.innerWidth, h = window.innerHeight;


can.width = w;
can.height = h;
var rad = w>h?h/2:w/2;
rad-=30;

var n = [], v = [], c = [];


var cnt=0;
var sum = 0;

function addValues()
56
{
n[cnt] = document.getElementById("nm").value;
v[cnt] = Number(document.getElementById("val").value);
sum += v[cnt];
c[cnt++] = document.getElementById("c").value;
drawPie();
}

function drawPie()
{
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0,0,w,h);
var startAngle = 0, endAngle;

for(var i=0; i<cnt; i++) {


ctx.beginPath();
var endAngle = startAngle+2*Math.PI*v[i]/sum;
ctx.fillStyle = c[i];
ctx.moveTo(w/2,h/2);
ctx.arc(w/2, h/2, rad, startAngle, endAngle);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "#000000";//c[i];
ctx.font = "12pt Calibri bold";
ctx.fillText(n[i]+"("+v[i]+")",
w/2+(rad+20)*Math.cos((startAngle+endAngle)/2),
10+h/2+(rad+20)*Math.sin((startAngle+endAngle)/2));
startAngle = endAngle;
}
ctx.font = "18pt Calibri";
ctx.textAlign="center";
ctx.fillStyle = "#FF0000";
ctx.fillText("Pie chart",w/2,h);
}
7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/pie.html.
8) Enter a name, value and choose a colour. Press Add button and the value
begins to appear under pie chart section.
9) Create a pie chart of your choice with at least 5 columns.
Ex. No.: 38
Date: 14.03.2018
AIM: To create line chart, sine wave and cosine wave using Javascript
PROCEDURE:
57
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad line.html. Choose YES when notepad seeks confirmation to
create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Line graph</title>
</head>
<html>
<body>
<center>
<input type="text" id="x" placeholder="X">
<input type="text" id="y" placeholder="Y">
<input type="color" id="c">
<input type="button" value="Add" onClick="addValues()">
<input type="button" value="Sine" onClick="drawSine()">
<input type="button" value="Cos" onClick="drawCos()">
<canvas id="canvas">
</canvas>
</center>
<script type="text/javascript" language="javascript" src="line.js">
</script>
</body>
</html>
</html>
6) Then, type notepad line.js in the command line. Type the following script
and save:
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");

var w = window.innerWidth, h = window.innerHeight;


can.width = w;
can.height = h;
ctx.fillStyle = "#000000";
ctx.textAlign = "center";
ctx.font = "24pt Calibri bold";
ctx.fillText(w+"x"+h, w/2, 30);
var x = [], y = [], c = [];
var cnt=0;
var maxX = 0, maxY = 0;
function addValues()
58
{
x[cnt] = document.getElementById("x").value;
y[cnt] = Number(document.getElementById("y").value);
c[cnt] = document.getElementById("c").value;
if(maxX < x[cnt])
maxX = x[cnt];
if(maxY < x[cnt])
maxY = y[cnt];
cnt++;
drawLine();
}
function drawLine()
{
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0,30,w,h-30);
for(var i=0; i<cnt-1; i++) {
ctx.beginPath();
ctx.strokeStyle = c[i];
ctx.moveTo(x[i],y[i]);
ctx.lineTo(x[i+1], y[i+1]);
ctx.stroke();
}
alert("Completed "+cnt);
}
function drawSine()
{
var n = prompt("Enter number of turns"),
clr = prompt("Enter color");
var dx = 0.001, i=0.0;
while(i<n) {
var x1 = (w-20)*i/n, y1 = h/2-Math.sin(i*2*Math.PI)*(h/2-20),
x2 = (w-20)*(i+dx)/n,
y2 = h/2-Math.sin((i+dx)*2*Math.PI)*(h/2-20);
ctx.beginPath();
ctx.strokeStyle = clr;
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
i+=dx;
}
}
function drawCos()
{
59
var n = prompt("Enter number of turns"),
clr = prompt("Enter color");
var dx = 0.001, i=0.0;
while(i<n) {
var x1 = (w-20)*i/n, y1 = h/2-Math.cos(i*2*Math.PI)*(h/2-20),
x2 = (w-20)*(i+dx)/n,
y2 = h/2-Math.cos((i+dx)*2*Math.PI)*(h/2-20);
ctx.beginPath();
ctx.strokeStyle = clr;
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
i+=dx;
}
}
7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/line.html.
8) Enter values for x, y and colour. Press Add button to add a point.
9) Press Sine or Cos button. Choose number of turns. Enter colour value and
verify that the wave form appears correctly.
Ex. No.: 39
Date: 15.03.2018
AIM: To display an image that moves with the mouse pointer using Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad img.html. Choose YES when notepad seeks confirmation to
create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Loading an image</title>
</head>
<html>
<body>
<center>
<canvas id="canvas" onMouseMove="drawImg(event)">
</canvas>
</center>
<script type="text/javascript" language="javascript" src="img.js">
</script>
</body>
60
</html>
6) Then, type notepad img.js in the command line. Type the following script
and save:
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");

var w = window.innerWidth, h = window.innerHeight;


can.width = w;
can.height = h;
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0,0,w,h);
ctx.font = "24pt Calibri bold";
ctx.fillText("VN image test: "+w+"x"+h, w/2, 30);

function drawImg(event)
{
var x = event.clientX, y = event.clientY;
var img = new Image();
img.src="rose1.jpg";
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0,0,w,h);
ctx.drawImage(img, x, y, img.width*0.25, img.height*0.25);
}
7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/img.html.
8) Move the mouse and watch the image moving with the cursor.
Ex. No.: 40
Date: 15.03.2018
AIM: To display an image that moves with the mouse pointer and leaves a trail
using Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad img1.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Loading an image</title>
</head>
<html>
<body>
61
<center>
<canvas id="canvas" onMouseMove="drawImg(event)">
</canvas>
</center>
<script type="text/javascript" language="javascript" src="img.js">
</script>
</body>
</html>
</html>
6) Then, type notepad img1.js in the command line. Type the following
script and save:
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");
var w = window.innerWidth, h = window.innerHeight;
can.width = w;
can.height = h;
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0,0,w,h);
ctx.font = "24pt Calibri bold";
ctx.fillText("VN image test: "+w+"x"+h, w/2, 30);
function drawImg(event)
{
var x = event.clientX, y = event.clientY;
var img = new Image();
img.src="rose1.jpg";
ctx.drawImage(img, x, y, img.width*0.25, img.height*0.25);
}
7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/img1.html.
8) Move the mouse and watch the image moving with the cursor. The image
leaves a trail.
Ex. No.: 41
Date: 15.03.2018
AIM: To create an analog clock that moves with the mouse pointer using
Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad clock1.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
62
<head>
<title>Analog clock</title>
</head>
<body>
<center>
<canvas id="clock" onMouseMove="coord(event)"></canvas>
</center>
<script type="text/javascript"
language="javascript" src="clock1.js">
</script>
<script type="text/javascript" language="javascript">
setInterval(clock, 1000);
</script>
</body>
</html>
6) Then, type notepad clock1.js in the command line. Type the following
script and save:
var can = ctx.textAlign="center";
document.getElementById("clock") ctx.translate(-x, -y);
; ctx.fillText("Coordinates:
var ctx = can.getContext("2d"); "+x+","+y,w/2,25);
var w = window.innerWidth, }
h = window.innerHeight; function clearCanvas()
var rad = (w>h?w:h)*0.06; {
can.width = w; ctx.beginPath();
can.height = h; ctx.fillStyle = "white";
var x=0, y=0; ctx.fillRect(0,0,w,h);
function coord(event) ctx.fill();
{ }
clearCanvas(); function drawCircle()
x=event.clientX; {
y = event.clientY; ctx.beginPath();
clock(); ctx.fillStyle = "#FFAACC";
} ctx.arc(0, 0, rad, 0, 2*Math.PI);
function clock() ctx.fill();
{ }
clearCanvas(); function drawBrim() {
ctx.translate(x, y); var gr =
drawCircle(); ctx.createRadialGradient(0,0,
drawBrim(); 0.95*rad,
drawNumbers(); 0,0, 1.05*rad);
drawTime(); gr.addColorStop(0, "#FFAA00");
ctx.font = "20px Calibri"; gr.addColorStop(0.5, "#FFFFFF");
63
gr.addColorStop(1, "#FFAA00"); m = dt.getMinutes(),
ctx.strokeStyle = gr; s = dt.getSeconds();
ctx.lineWidth = rad*0.1; s *= Math.PI/30;
ctx.stroke(); m = m*Math.PI/30+s/60;
} h = h*Math.PI/6+m/12;
function drawNumbers() { drawHand(h, rad*0.45, rad*0.08,
ctx.fillStyle = "blue"; "green");
ctx.font = rad*0.2+"px Calibri"; drawHand(m, rad*0.6, rad*0.04,
ctx.setBaseLine = "middle"; "#00CCCC");
ctx.textAlign = "center"; drawHand(s, rad*0.75, rad*0.02,
for(var i=1;i<=12; i++) { "red");
var ang = i*Math.PI/6; ctx.beginPath();
ctx.rotate(ang); ctx.fillStyle = "#000000";
ctx.translate(0,- ctx.arc(0,0,rad*0.05, 0, 2*Math.PI);
rad*(i>=3&&i<=9?0.9:0.8)); ctx.fill();
ctx.rotate(-ang); }
ctx.fillText(i.toString(), 0, 0); function drawHand(ang, l, w, c)
ctx.rotate(ang); {
ctx.translate(0,rad*(i>=3&&i ctx.beginPath();
<=9?0.9:0.8)); ctx.lineWidth = w;
ctx.rotate(-ang); ctx.lineCap = "round";
} ctx.strokeStyle = c;
ctx.fillStyle="green"; ctx.moveTo(0,0);
ctx.font = 0.2*rad+"px Arial"; ctx.rotate(ang);
ctx.fillText("COPA", 0, -0.5*rad); ctx.lineTo(0,-l);
} ctx.stroke();
function drawTime() { ctx.rotate(-ang);
var dt = new Date(); }
var h = dt.getHours()%12,

7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/clock1.html.
8) Move the mouse and watch the analog clock moving with the mouse
pointer.
Ex. No.: 42
Date: 16.03.2018
AIM: To create monthly calendar using Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad cal.html. Choose YES when notepad seeks confirmation to
create a new file.
64
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Calendar</title>
<script type="text/javascript" language="javascript" src = "calendar.js">

</script>
</head>
<body>
<form name="calFrm" action="#" method="POST">
<center>
<h1 style="color:red">Calendar</h1>
<select id="mnOpt">
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<input type="number" id="year" placeholder="Year">
<input type="button" value="Display" onClick="cal()">
<br />
<img width="100%" height="70%" src="1.jpg" id="gallery">
<table>
<tr><th style = "color : white; background : red; font-size : 600%">Sun</th>
<th style = "color : white; background : blue; font-size : 600%">Mon</th>
<th style = "color : white; background : blue; font-size : 600%">Tue</th>
<th style = "color : white; background : blue; font-size : 600%">Wed</th>
<th style = "color : white; background : blue; font-size : 600%">Thu</th>
<th style = "color : white; background : blue; font-size : 600%">Fri</th>
<th style = "color : white; background : red; font-size: 600%">Sat</th></tr>

<tr><td><input type = "text" id = "0" style = "text-align:center; color : white;


background : red; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "1" style = "text-align:center; color : white;
background :blue; font-size : 600%" size = "1"></td>
65
<td><input type = "text" id = "2" style = "text-align:center; color : white;
background :blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "3" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "4" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "5" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "6" style = "text-align:center; color : white;
background : red; font-size : 600%" size = "1"></td>
</tr>

<tr><td><input type = "text" id = "7" style = "text-align:center; color : white;


background : red; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "8" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "9" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "10" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "11" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "12" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "13" style = "text-align:center; color : white;
background : red; font-size : 600%" size = "1"></td>
</tr>

<tr><td><input type = "text" id = "14" style = "text-align:center; color : white;


background : red; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "15" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "16" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "17" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "18" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "19" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "20" style = "text-align:center; color : white;
background : red; font-size : 600%" size = "1"></td>
66
</tr>

<tr><td><input type = "text" id = "21" style = "text-align:center; color : white;


background : red; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "22" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "23" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "24" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "25" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "26" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "27" style = "text-align:center; color : white;
background : red; font-size : 600%" size = "1"></td>
</tr>

<tr><td><input type = "text" id = "28" style = "text-align:center; color : white;


background : red; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "29" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "30" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "31" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "32" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "33" style = "text-align:center; color : white;
background : blue; font-size : 600%" size = "1"></td>
<td><input type = "text" id = "34" style = "text-align:center; color : white;
background : red; font-size : 600%" size = "1"></td>
</tr>

</table>
</center>
</form>
</body>
</html>
6) Then, type notepad cal.js in the command line. Type the following script
and save:
var mn = [ "January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"];
67
function cal()
{
var m = document.getElementById("mnOpt").value;
m = mn.indexOf(m);
var dt = new Date();
var y = Number(document.getElementById("year").value);
dt.setFullYear(y);
dt.setMonth(m);
dt.setDate(1);
var startDay = dt.getDay();
dt.setMonth(m+1);
dt.setDate(0);

document.getElementById("gallery").src = (m+1)+".jpg";

var endDate = dt.getDate();


var dc = 1;

for(var i=0; i<35; i++)


document.getElementById(""+i).value = "";

for(var i=0; i<endDate; i++) {


if((i+startDay)<35)
document.getElementById(""+(i+startDay)).value = (i+1);
else
document.getElementById(""+((i+startDay)%35)).value = (i+1);
}
}
7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/cal.html. Verify that the correct calendar is
displayed.
Ex. No.: 43
Date: 20.03.2018
AIM: To calculate age using Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad age.html. Choose YES when notepad seeks confirmation to
create a new file.
5) Enter the following HTML code in notepad and save the file:
68
<html>
<head>
<title>Age Calculation</title>
<script type="text/javascript" language="javascript" src="age.js">
</script>
</head>
<body style = " background-color: #66FFFF; color: red">
<form name="ageForm" action="#" method="post">
<center>
<h1>Age Calculation</h1>
<table>
<tr><td>Enter DOB</td><td>:</td><td><input type="text"
name="x"></td></tr>

</table>
<input type="button" value="Get age" onClick="ageFunc()">

<span id = "res"></span>
</center>
</form>
</body>
</html>
6) Then, type notepad age.js in the command line. Type the following script
and save:
function ageFunc() {
var x = document.ageForm.x.value;
var dob = new Date(x);
var today = new Date();
var duration = today.getTime() - dob.getTime();
var age = new Date(duration);
var y = age.getFullYear()-1970, m = age.getMonth(), d = age.getDate()-1*;
var str = y+" Year "+m+" Month "+d+" Day ";
document.getElementById("res").innerHTML = "<h1 style=
'color:red'>"+str+"</h1>";
}
7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/age.html. Enter date of birth and verify that the
correct age is displayed.
Ex. No.: 44
Date: 20.03.2018
AIM: To create a mine sweeper game using Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
69
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad game.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
</head>

<body>
<button id="1" onClick="check(this.id)" width="10%" height="10%">
<img src="3.jpg" width="10%" height="10%">
</button>
</button><button id="1" onClick="check(this.id)" width="10%"
height="10%">
<img src="3.jpg" width="10%" height="10%">
</button>
<button id="2" onClick="check(this.id)" width="10%" height="10%">
<img src="3.jpg" width="10%" height="10%">
</button><button id="3" onClick="check(this.id)" width="10%"
height="10%">
<img src="3.jpg" width="10%" height="10%">
</button>
<button id="4" onClick="check(this.id)" width="10%" height="10%">
<img src="3.jpg" width="10%" height="10%">
</button>
<button id="5" onClick="check(this.id)" width="10%" height="10%">
<img src="3.jpg" width="10%" height="10%">

</body>
</head>
</html>
6) Then, type notepad game.js in the command line. Type the following
script and save:
var x = [];
var i = 0;

while(i<10) {
var ran = Math.random()*25;
ran = Math.floor(ran);

if (ran>24)
70
ran = 24;
if(x.indexOf(ran) < 0) {
x[i] = ran;
i++;
}
}

var tries = 0;
var score = 0;

function tryThis(id)
{
var b = document.getElementById(id);
var index = x.indexOf(Number(id));
if(index<0) {
b.bgColor = "#FF0000";
tries++;
}
else {
b.bgColor = "#00FF00";
tries++;
score+= 10;
}
b.disabled = true;
if(tries == 15) {
alert("Your score: "+score);
score = tries = 0;
}

var res = document.getElementById("res");


var s = "<h1 style = color: '#0000FF'>Score: "+score+"</h1>";
res.innerHTML = s;
}

7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/game.html. Click the buttons and verify that
the score and number of tries are correctly displayed.
Ex. No.: 45
Date: 20.03.2018
AIM: To egg game using Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
71
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad egg.html. Choose YES when notepad seeks confirmation to
create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Egg game</title>
</head>
<html>
<body>
<center>
<input type="button" value="Start" onClick="startGame()">
<input type="button" value="Pause" onClick="pauseGame()">
<input type="button" value="Resume" onClick="resumeGame()">
<input type="button" value="Stop" onClick="stopGame()">
<input type="button" value="Score" onClick="displayScore()">
<canvas id="canvas" onMouseMove="moved(event)">
</canvas>
</center>
<script type="text/javascript" language="javascript" src="egg.js">
</script>

</body>
</html>
</html>
6) Then, type notepad egg.js in the command line. Type the following script
and save:
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");

var w = window.innerWidth, h = window.innerHeight*0.9;


can.width = w;
can.height = h;

var thread = null;


var dt = 100;
var paused = false;
var x = -1, y = 0;
var egg = new Image(), broken = new Image(),
basket = new Image();
egg.src = "egg.jpg";
broken.src = "broken.jpg";
72
basket.src = "basket.jpg";

var mouseX = 0, mouseY = 0;

var score = 0, life = 3;

function moved(event)
{
mouseX = event.clientX;
mouseY = event.clientY;
}

function startGame()
{
if(thread != null)
clearInterval(thread);
life = 3;
score = 0;
thread = setInterval(play, dt);
}

function pauseGame()
{
paused = true;
}

function resumeGame()
{
paused = false;
}

function stopGame()
{
if(thread != null)
clearInterval(thread);
x = -1;
y = 0;
}

function play()
{
if(paused)
return;
73
if(x == -1)
x = Math.random()*w;
else
x += Math.round( (0.5-Math.random())*w/20);
if(x < 0)
x = 40;
if(x > w)
x = w-40;

y += Math.round((Math.random())*h/20);

ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0,0,w,h);

if(y<h-basket.height*0.2)
ctx.drawImage(egg, x, y, egg.width*(y+h/20)/h*0.3,
egg.height*(y+h/20)/h*0.3);
else {
ctx.drawImage(broken, x, y, broken.width*y/h*0.3,
broken.height*y/h*0.3);
life--;
x = -1;
y = 0;
}
var bs = 0.4;
ctx.drawImage(basket, mouseX, h-basket.height*bs, bs*basket.width,
bs*basket.height);
if((h-y) <= basket.height*bs && Math.abs(mouseX-x) < basket.width*bs/2) {
score += 10;
x = -1;
y = 0;
}
drawLife();
drawScore();
if(life == 0) {
stopGame();
getName();
}
}
function drawLife() {
ctx.fillStyle = "#0000FF";
ctx.font = "40px Arial";
ctx.fillText("Life: ",100,40);
74
ctx.textAlign = "right";
for(var i=0; i<life; i++)
ctx.drawImage(egg, 155+i*(egg.width*0.2+5), 0, egg.width*0.2,
egg.height*0.2);
}
function drawScore() {
ctx.fillStyle = "#FF0000";
ctx.font = "40px Arial";
ctx.textAlign = "center";
ctx.fillText("Score: "+score,w-200,40);
}
function getName()
{
var n = prompt("Enter your name: ");
var prevScore = getCookie(n);
prevScore = Number(prevScore);
alert(prevScore);
if(prevScore < score)
document.cookie = n+"="+score;
}
function displayScore() {
var w = window.open("about:blank","","_blank");
var str = document.cookie.split(";");
var mess = "<center><h1 style='color:#FF0000'>Scores</h1><table
border=1><tr><th>Name</th><th>Score</th></tr>";
for(var i=0; i<str.length; i++)
mess += "<tr><td>"+str[i].replace("=","</td><td>")+"</td></tr>";
w.document.write(mess);
}

function getCookie(n)
{
var str = document.cookie.split(";");
for(var i=0; i<str.length; i++) {
var ns = str[i].split("=");
if(ns[0].trim() == n)
return ns[1];
}
return 0;
}
7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/game.html. Click the buttons and verify that
the score and number of tries are correctly displayed.
75
Ex. No.: 46
Date: 22.03.2018
AIM: To create objects using Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad student.html. Choose YES when notepad seeks
confirmation to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>OOPS using Javascript - Student</title>
<script type="text/javascript" language="javascript" src="student.js">
</script>
</head>

<body>
<form name="studentFrm" action="#" method="GET">
<center>
<input type="button" value="Add student" onClick="addStud()">
<input type="button" value="Display" onClick="dispStud()">
<span id="res"></span>
</center>
</form>
</body>
</html>
6) Then, type notepad student.js in the command line. Type the following
script and save:
function Student()
{
this.name = "";
this.dob = null;
this.mark = 0;

this.setName = function(n) {
this.name = n;
}

this.setDOB = function(d) {
this.dob = d;
76
}

this.setMark = function(m) {
this.mark = m;
}

this.getName = function() {
return this.name;
}

this.getDOB = function() {
return this.dob;
}

this.getMark = function() {
return this.mark;
}

this.getAge = function() {
return new Date(Date.now() - new Date(this.dob).getTime()).getFullYear()-
1970;
}
}

var studArray = [];


var index = 0;

function addStud()
{
var n = prompt("Name"), d = prompt("DOB"), m = prompt("Mark");
var st = new Student();
st.setName(n);
st.setDOB(d);
st.setMark(m);
studArray[index] = st;
index++;
}
function dispStud() {
var str = "<table border=1>";
for(var i=0; i<index; i++) {
str += "<tr style=font-size:300%;color:green><td>"+(i+1)+")</td>";
str += "<td>Name: "+studArray[i].getName()+"</td>";
str += "<td>DOB: "+studArray[i].getDOB()+"</td>";
77
str += "<td>Mark: "+studArray[i].getMark()+"</td>";
str += "<td>Age: "+studArray[i].getAge()+"</td>";
str += "</tr>"
}
str += "</table>";
document.getElementById("res").innerHTML = str;
}

7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/student.html.
8) Click Add student button add new student.
9) Click display button to view the result. Verify whether all values are
displayed correctly by the script.
Ex. No.: 47
Date: 22.03.2018
AIM: To create a calculator using Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad calc.html. Choose YES when notepad seeks confirmation to
create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>Calculator</title>
<script type="text/javascript" language="javascript" src="calc.js">
</script>
</head>

<body style='background-color:#DDFFAA'>
<form name="calcFrm" action="#" method="POST">
<center>
<h1 style='color:red'>Calculator</h1>

<div align="right">
<input style="text-align:right;color:blue;font-size:120%" type="text"
name="mem">
</div>

<input style="font-size:200%;color:red;text-align:right;overflow:auto"
type="text" name="exp"> <br />

78
<input style="font-size:200%;color:green;text-align:right" type="text"
name="res">

<table>
<tr style='background-color:blue;text-align:center'>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="7" onClick="exp.value = exp.value+'7'"></td>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="8" onClick="exp.value = exp.value+'8'"></td>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="9" onClick="exp.value = exp.value+'9'"></td>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="+" onClick="exp.value = exp.value+'+'"></td>
</tr>

<tr style='background-color:blue;text-align:center'>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="4" onClick="exp.value = exp.value+'4'"></td>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="5" onClick="exp.value = exp.value+'5'"></td>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="6" onClick="exp.value = exp.value+'6'"></td>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="-" onClick="exp.value = exp.value+'-'"></td>
</tr>

<tr style='background-color:blue;text-align:center'>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="1" onClick="exp.value = exp.value+'1'"></td>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="2" onClick="exp.value = exp.value+'2'"></td>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="3" onClick="exp.value = exp.value+'3'"></td>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="*" onClick="exp.value = exp.value+'*'"></td>
</tr>

<tr style='background-color:blue;text-align:center'>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="." onClick="exp.value = exp.value+'.'"></td>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="0" onClick="exp.value = exp.value+'0'"></td>

79
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="=" onClick="evalFunc()"></td>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="/" onClick="exp.value = exp.value+'/'"></td>
</tr>

<tr style='background-color:blue;text-align:center'>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="A" onClick="exp.value = exp.value+ansVal()"></td>
<td><input style="background-color:blue;font-size:300%;color:white"
type="button" value="M" onClick="memPlace()"></td>
<td><input style="background-color:blue;font-size:100%;color:white"
type="button" value="MR" onClick="exp.value = exp.value+memVal()"></td>
<td><input style="background-color:blue;font-size:100%;color:white"
type="button" value="DEL" onClick="exp.value = backSpace()"></td>
</tr>

</table>
</center>
</form>
</body>
</html>
6) Then, type notepad calc.js in the command line. Type the following script
and save:
var mem = 0, ans = 0;

function evalFunc()
{
var input = document.calcFrm.exp.value;
ans = eval(input);
document.calcFrm.res.value = ans;
document.calcFrm.exp.value = "";
dispMem();
}

function memPlace() {
mem = Number(document.calcFrm.res.value);
dispMem();
}

function memVal() {
return mem;
}
80
function memClr() {
mem = 0;
dispMem();
}

function ansVal()
{
return ans;
}

function dispMem()
{
document.calcFrm.mem.value = "Memory: "+mem;
}

function backSpace()
{
var txt = document.calcFrm.exp.value;
var len = txt.length;
var sub = txt.substring(0, len-1);
return sub;
}
7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/calc.html.
8) Make input and verify whether the calculator displays the right result.

81
Ex. No.: 48
Date: 26.03.2018
AIM: To create a guessing game using Javascript
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\htdocs\<your folder>.
4) Type notepad guess.html. Choose YES when notepad seeks confirmation
to create a new file.
5) Enter the following HTML code in notepad and save the file:
<html>
<head>
<title>மைறந் த என்ன?</title>
<script src="guess.js">
</script>
</head>
<body>
<form name="questForm" method="GET" action="#">
<div align="right">
<span id="score"> </span><br />
</div>

<center>
<h1 style="color:#FF0000"> வார்த்ைதையக் </h1>
<span id="images"></span><br />
<span id="options"></span><br />
<span id="clue"></span><br />
<span id="ans"></span><br />

<input type="button" value="ந் ைதய ேகள் " onclick="previous()">


<input type="button" value="அத்த ேகள் " onclick="question()">
<input type="button" value="உத" onclick="clue()">
<input type="button" value="See scores" onclick="getScores()">

</center>
</form>
<script>
question();
</script>
</body>
</html>

82
6) Then, type notepad guess.js in the command line. Type the following
script and save:
var q = [
"1-a.png;1-b.jpg",
"2-a.jpg;2-b.jpg;2-c.jpg",
"3-a.png;3-b.jpg",
"4-a.png;4-b.jpg",
"5-a.jpg;5-b.jpg",
"6-a.jpg;6-b.jpg",
"7-a.jpg;7-b.jpg;7-a.jpg",
"8-a.jpg;8-b.jpg",
"9-a.jpg;9-b.jpg;12-c.jpg;9-c-1.jpg",
"10-a.png;10-b.jpg",
];

var a = [
"ஒ(ம் )க்",
"மணிேமகைல",
"பழைம",
"சண்ைட",
"பஞ் ச #தம் ",
"ஜய் ",
"ஐ.&.ஐ",
"மார்க்ேகானி",
"கம் 'ட்டர்",
"கேயா",
];

var cl=[
"இ ஒ) சர்வேதச ைளயாட். 4 ஆண்க+க்,
ஒ)ைற நைடெப)ம் ",
"இ ஒ) மாெப)ம் காப் யம் ",
"கடந் த காலம் ",
".த்தத்/ன் மெபயர்",
"இயற் ைக0ன் ஐந்  க்1ய ரி2கள் ",
"ரபல த3ழ் க் கதாநாயன்",
"ெதா4ற் ப0ற் 5 நிைலயம் ",
"வாெனாையக் கண்&த்த ஞ் ஞானி",
"கணிணிைய இப் ப&.ம் அைழக்காலம் ",

83
"#36ரியைனச் 7ற் வதாக தல் கண்ட8ந் 
8யதற் காகக் ெகால் லப் பட்ட இத்தாய ஞ் ஞானி",
];

var n=-1;
var answer=0;
var wrongCount = 0;
var score=0;
var clueTaken=false;

function question(){
if(n==q.length-1) {
setScore();
n=-1;
}
n++;
var i = q[n].split(";"), str=" ";
document.getElementById("clue").innerHTML="<h1></h1>";
document.getElementById("ans").innerHTML="<h1></h1>";

for(x in i)
str +="<img width='"+(90/i.length)+"%'height='40%'
src='images/"+i[x]+" '>"+(x==i.length-1?"":"+");

document.getElementById("images").innerHTML=str;
takeOptions();
clueTaken=false;
}

function previous() {
n-=2;
question();
}

function takeOptions() {
var options=[];
answer = getRangeRand(0,3);
options[answer] = a[n];
var str = "<h2 style='color:#FF0000'>சரியான ப/ைலத் ேதர்2
ெசய் ய2ம் :</h2><table border=0 width='100%'>";
for(var i=0; i<4; i++) {
if(i != answer) {
84
var temp=getRand();
while(temp == n)
temp = getRand();
options[i]=a[temp];
}
str += "<tr><td> <div align='right'><input type='radio' name='option'
value='"+i+"' onClick='"+
(answer==i?"correct()":"wrong()")+
"'></div></td><td><h2
style='color:#0000FF'>"+options[i]+"</h2></td></tr>\n";

}
document.getElementById("options").innerHTML = str+"\n</table>";
}
function getRangeRand(x, y) {
var z = Math.random()*(y-x);
return x+Math.abs(Math.round(z));
}

function getRand() {
var x = Math.random()*q.length-1;
return Math.abs(Math.round(x));
}

function clue() {
document.getElementById("clue").innerHTML="<h1
style='color:#FF3478'>"+cl[n]+"</h1>";
clueTaken=true;
}
function correct() {
document.getElementById("ans").innerHTML="<h1
style='color:#0000FF'>"+a[n]+"</h1>";
var song = new Audio("right.mp3");
song.play();
alert("Correct!");
score += clueTaken?5:10;
displayScore();
question();
}
function wrong() {
document.getElementById("ans").innerHTML="<h1
style='color:#0000FF'>"+a[n]+"</h1>";
var song = new Audio("wrong.mp3");
85
song.play();
alert("Wrong!\nCorrect answer is: "+a[n]);
wrongCount++;
displayScore();
if(wrongCount >= 3)
setScore();
question();
}
function displayScore() {
document.getElementById("score").innerHTML = "<div align='right'><h1
style='color:#FF0000'> Score: "+score+
" (Wrong answers: "+wrongCount+")</h1></div>";
}
function getScores() {
var w = window.open("about:blank","","_blank");
var str = document.cookie.split(";");
var mess = "<center><h1 style='color:#FF0000'>Scores</h1><table
border=1><tr><th>Name</th><th>Score</th></tr>";
for(var i=0; i<str.length; i++)
mess += "<tr><td>"+str[i].replace("=","</td><td>")+"</td></tr>"
w.document.write(mess);
}
function setScore() {
var name=prompt("Exhausted after 3 worng answers!\n Enter your name");
document.cookie = name+"="+score;
score=0;
wrongCount=0;
displayScore();
n=-1;
}
7) After typing the code, open FireFox browser. Enter the URL
http://127.0.0.1/<name>/guess.html.
Ex. No.: 49
Date: 26.03.2018
AIM: To create database and tables for application entry
PROCEDURE:
1) Start XAMPP control panel. Start Apache server.
2) Open command prompt (Press Windows+R, type cmd and press Enter).
3) Type cd \xampp\mysql\bin.
4) To open SQL prompt, type mysql –u root –p and press enter. Press enter
when prompted for password. SQL prompt opens.
5) To create a database in your name, type create database <name>; and
press enter. Look out for Query OK message in the SQL prompt.
86
6) To change the database, type use <name> and press enter.
7) To create a table for storage of applicant details, issue the following SQL
command: create table IF NOT EXISTS applicant (id bigint
auto_increment primary key, name varchar(30), dob date, mark
double, max_mark double, address1 varchar(50), address2
varchar(50), address3 varchar(50), pincode varchar(10));
8) To insert a record into the applicant table, use the following sample
query: insert into applicant (name, dob, mark, max_mark, address1,
address2, address3, pincode) values ('Amala','1999-03-14',400, 500,
'12, Church street','Villianur and post','Puducherry','605110');
9) Insert at least 10 records into the applicant table.
10) To display the records, issue the following command:
select * from applicant;
11) To display the records sorted by name, issue the following command:
select * from applicant order by name;
12) To display the records sorted by marks, then by date of birth issue the
following command:
select * from applicant order by mark DESC, dob ASC;
13) To display id, name, address1, address2, address2 and percentage of
marks (mark/max_mark*100), issue the following SQL command:
select id,name,address1, address2, address3, (mark/max_mark*100) as
percentage from applicant order by percentage DESC;
14) To display id, name, address1, address2, address2 and percentage of
marks (mark/max_mark*100) where percentage is above 70%, issue the
following SQL command:
select id,name,address1, address2, address3, (mark/max_mark*100) as
percentage from applicant having percentage >= 70 order by percentage
DESC;
15) To display applicants having date of birth greater than 1999-03-15
(replace with any other date) issue the following SQL command:
select id,name,address1, address2, address3, (mark/max_mark*100) as
percentage from applicant where dob >= '1999-03-15' order by percentage
DESC;

87
Ex. No.: 50-A
Date: 28.03.2018
AIM: To create income and expense account statement using PHP and HTML
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
4) Open command prompt (Press Windows+R, type cmd and press Enter).
5) Type cd \xampp\htdocs\<your folder>.
6) Issue the command md acc to create a folder for accounting files. Type
cd acc to change to acc folder.
7) Type notepad db.php. Choose YES when notepad seeks confirmation to
create a new file. This file creates a connection to MySQL database server,
creates a database (if not already available), uses the new database and
creates a table for accounting (if not already available).
<?php
$dbName = "vn";//Type your name for database

$db = mysqli_connect("localhost","root","");

if(mysqli_connect_errno()) {
printf("Error in connecting to MySQL
server\n"+mysqli_connect_errno());
return;
}

$q = "create database IF NOT EXISTS " . $dbName . ";";


if($db->query($q) != true) {
echo "Error in creating database " . $dbName;
return;
}
$q = "use " . $dbName . ";";
if($db->query($q) != true) {
echo "Error in changing database to " . $dbName;
return;
}

$q = "create table IF NOT EXISTS account (id bigint auto_increment primary


key, dt date, type varchar(25), description varchar(250), head varchar(50),
amount double);";
if($db->query($q) != true) {
echo "Error in creating account table";
return;
88
}
?>
8) Then, type notepad entry.html in the command line. Type the following
script and save:
<html>
<head>
<title>Transaction entry</title>
</head>

<body>
<form name="trFrm" action="insert.php" method="POST">0
<center>
<h1 style="color:red">Transaction entry</h1>
<table>
<tr>
<td>Date</td><td>:</td>
<td><input type="date" name="dt" placeholder="Date"><br /></td>
</tr>
<tr>
<td>Type</td><td>:</td>
<td>
<select name="type">
<option value="INCOME">INCOME</option>
<option value="EXPENSE">EXPENSE</option>
</select>
</td>
</tr>
<tr>
<td>Description</td><td>:</td>
<td><input type="text" name="desc"></td>
</tr>
<tr>
<td>Head of account</td><td>:</td>
<td><input type="text" name="head"></td>
</tr>
<tr>
<td>Amount</td><td>:</td>
<td><input type="text" name="amt"></td>
</tr>
</table>
<input type="submit" value="Enter transaction">
<input type="reset" value="Reset">
</center>
89
</form>
</body>
</html>
9) The above HTML file contains a form named trFrm with action value of
entry.php. Hence, it is necessary to create a file named entry.php and
place the file at \xampp\htdocs\<name>\acc.
10) Issue the command notepad insert.php at the command prompt. Press
YES when prompted to create a new file. Type the following script and
save the file:
<?php
require_once('db.php');

$dt = $_POST['dt'];
$type = $_POST['type'];
$desc = $_POST['desc'];
$h = $_POST['head'];
$amt = $_POST['amt'];

$q = "insert into account (dt, type, description, head, amount) values ('" .
$dt . "','" . $type . "','" . $desc . "','" . $h . "'," . $amt . ");";

if($db->query($q) == true) {
echo "<center><h1 style='color:green'>Successfully inserted the record
vide record ID " .
$db->insert_id ."</h1></center>";
}
else echo "<center><h1 style='color:red'>Error in query " . $q .
": " . $db->error . "</h1></center>";
?>
11) Open firefox browser. Enter the URL
http://127.0.0.1/<name>/acc/entry.html. Enter the values sought by the
form and press enter transaction button.
12) The data entered in the form is submitted to the insert.php script. It
receives all form data using $_POST[‘name’] array in PHP.
13) Now, open command prompt. Type cd \xampp\mysql\bin. The issue the
command ‘mysql 0 root –D <fbname> –p ’;
14) Verify that the account entries/ transactions are properly displayed.
Ex. No.: 50-B
Date: 29.03.2018
AIM: To create income and expense account statement using PHP and HTML
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
90
3) Start MySQL server.
4) Open command prompt (Press Windows+R, type cmd and press Enter).
5) Type cd \xampp\htdocs\<your folder>.
6) Issue the command md acc to create a folder for accounting files. Type
cd acc to change to acc folder.
7) Type notepad report.html. Choose YES when notepad seeks confirmation
to create a new file. This file creates 3 buttons which are hyperlinks to
income.php, expense.php and balance.php scripts.
<html>
<head>
<title>Report</title>
</head>

<body>
<center>
<a href="income.php"><input type="button" value="Income
statement"></a><br />
<a href="expense.php"><input type="button" value="Expense
statement"></a><br />
<a href="balance.php"><input type="button" value="Balance
statement"></a><br />
</center>
</body>
</html>
8) To create income.php script, type notepad income.php in the command
prompt and press YES to confirm creation of new file, enter the following
script and save the file:
<?php
include_once('db.php');
$q = "select * from account where type='INCOME';";

$res = $db->query($q);

if($res->num_rows < 0)
return;

$str = "<body style='background-color:#CCFFDD;font-


size:200%'><center><h1>Income report</h1>";
$str .= "<table border=2 style='background-color:#CCFFFF;font-
size:120%'><tr><th>ID</th><th>Date</th><th>Type</th><th>Dexcription</t
h><th>Head of account</th><th>Amount</th></tr>";

$total = 0;
91
while($row = $res->fetch_array(MYSQLI_BOTH)) {
$str .= "<tr><td style='text-align:center'>" . $row["id"] . "</td>" .
"<td>" . $row["dt"] . "</td>" .
"<td>" . $row["type"] . "</td>" .
"<td>" . $row["description"] . "</td>" .
"<td>" . $row["head"] . "</td>" .
"<td style='text-align:right;color:red;font-weight:bold'>" .
number_format($row["amount"]) . "</td></tr>";
$total += $row["amount"];
}
$str .= "<tr><td colspan=5 style='font-weight:bold;text-
align:center'>Total</td>" .
"<td style='text-align:right;color:red;font-weight:bold'>" .
number_format($total) . "</td></tr>";
$str .= "</table></center></body>";

echo $str;
?>
9) To create income.php script, type notepad expense.php in the command
prompt and press YES to confirm creation of new file, enter the following
script and save the file:
<?php
include_once('db.php');
$q = "select * from account where type='EXPENSE';";

$res = $db->query($q);

if($res->num_rows < 0)
return;

$str = "<body style='background-color:#CCFFDD;font-


size:200%'><center><h1>Expense report</h1>";
$str .= "<table border=2 style='background-color:#CCFFFF;font-
size:120%'><tr><th>ID</th><th>Date</th><th>Type</th><th>Dexcription</t
h><th>Head of account</th><th>Amount</th></tr>";

$total = 0;

while($row = $res->fetch_array(MYSQLI_BOTH)) {
$str .= "<tr><td style='text-align:center'>" . $row["id"] . "</td>" .
"<td>" . $row["dt"] . "</td>" .
"<td>" . $row["type"] . "</td>" .
92
"<td>" . $row["description"] . "</td>" .
"<td>" . $row["head"] . "</td>" .
"<td style='text-align:right;color:red;font-weight:bold'>" .
number_format($row["amount"]) . "</td></tr>";
$total += $row["amount"];
}
$str .= "<tr><td colspan=5 style='font-weight:bold;text-
align:center'>Total</td>" .
"<td style='text-align:right;color:red;font-weight:bold'>" .
number_format($total) . "</td></tr>";
$str .= "</table></center></body>";

echo $str;
?>
10) Ha To create income.php script, type notepad expense.php in the
command prompt and press YES to confirm creation of new file, enter the
following script and save the file:
<?php
include_once('db.php');
$q = "select * from account order by dt DESC, id ASC;";

$res = $db->query($q);

if($res->num_rows < 0)
return;

$str = "<body style='background-color:#CCFFDD;font-


size:200%'><center><h1>Balance report</h1>";
$str .= "<table border=2 style='background-color:#CCFFFF;font-
size:100%'><tr><th>ID</th><th>Date</th><th>Type</th><th>Dexcription</t
h><th>Head of
account</th><th>Income</th><th>Expense</th><th>Balance</th></tr>";

$ti = $te = $bal = 0;

while($row = $res->fetch_array(MYSQLI_BOTH)) {
$str .= "<tr><td style='text-align:center'>" . $row["id"] . "</td>" .
"<td>" . $row["dt"] . "</td>" .
"<td>" . $row["type"] . "</td>" .
"<td>" . $row["description"] . "</td>" .
"<td>" . $row["head"] . "</td>";

$t = $row["type"];
93
$a = $row["amount"];
if($t == "INCOME") {
$ti += $a;
$bal += $a;
$str .= "<td style='color:green;text-align:right'>" .
number_format($a) . "</td><td></td>" .
"<td style='text-align:right;color:blue'>$bal</td>";
}
else {
$te += $a;
$bal -= $a;
$str .= "<td></td><td style='color:red;text-align:right'>" .
number_format($a) . "</td>" .
"<td style='text-align:right;color:blue'>$bal</td>";
}
}
$str .= "<tr><td colspan=5 style='font-weight:bold;text-
align:center'>Total</td>" .
"<td style='text-align:right;color:green;font-weight:bold'>" .
number_format($ti) . "</td>" .
"<td style='text-align:right;color:red;font-weight:bold'>" .
number_format($te) . "</td>" .
"<td style='text-align:right;color:blue;font-weight:bold'>" .
number_format($bal) . "</td></tr>";
$str .= "</table></center></body>";

echo $str;
?>
11) Open Firefox browser, enter the URL
http://127.0.0.1/<name>/acc/report.html. Verify that the income,
expense and balance statements are correctly displayed.
Ex. No.: 51
Date: 02.04.2018
AIM: To create running mascot game using HTML/ Javascript
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Open command prompt (Press Windows+R, type cmd and press Enter).
4) Type cd \xampp\htdocs\<your folder>.
5) Type notepad shoot.html. Choose YES when notepad seeks confirmation
to create a new file. Type the following script and save the file:
<html>
<head>
94
<title>Mascot runner</title>
</head>
<html>
<body>
<h1 style="text-align:center;color:red">Keys: 4 Arrows + Ctrl (Jump
high)</h1>
<center>
<canvas id="canvas">
</canvas>
</center>
<img src="shoot/fire.gif" width=20% height=0%>
<img src="shoot/fire.gif" width=10% height=20%>
<img src="shoot/fire.gif" width=20% height=0%>
<img src="shoot/fire.gif" width=10% height=20%>
<img src="shoot/fire.gif" width=20% height=0%>
<img src="shoot/fire.gif" width=10% height=20%>
<script type="text/javascript" language="javascript" src="shoot.js">
</script>

</body>
</html>
6) To create shoot.js script, type notepad shoot.js in the command prompt
and press YES to confirm creation of new file, enter the following script
and save the file:
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");

var w = window.innerWidth, h = window.innerHeight*0.7;


can.width = w;
can.height = h;

var dt = 100;

var gun = new Image(), fire = new Image(),


bullet = new Image(), mas = new Image(), diadem = new Image();
gun.src = "shoot/gun.png";
fire.src = "shoot/fire.gif";
bullet.src = "shoot/bullet.png";
mas.src = "shoot/mas.png";
diadem.src = "shoot/diadem.png";

var win1 = new Audio(), win2 = new Audio(), loose = new Audio();
win1.src = "shoot/winner.mp3";
95
win2.src = "shoot/cheer.wav";
loose.src = "shoot/looser.wav";

var ms = 0.5, gs=0.05, bs = 0.25, ds=0.04;


var x=ms*mas.width, y = h-ms*mas.height-h/25;
var xb = 0, yb = 0;
var shooter = Math.floor(Math.random()*30);
var fired = false, dead = 0, won = 0;

document.addEventListener("keydown", dn);
setInterval(play, dt);

function dn(event)
{
var key = event.keyCode;
if(key == 39)
x += w/50;
else if(key == 37)
x -= w/50;
else if(key == 38 && y>h/2)
y -= h/20;
else if(key == 40)
y += h/10;
else if(key == 17)
y -= h/5;
}

function play()
{
if(dead > 0) {
lost();
dead--;
return;
}

ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0,0,w,h);

ctx.strokeStyle = "#000000";
ctx.lineWidth = h/25;
ctx.moveTo(0,h);
ctx.lineTo(w,h);
ctx.stroke();
96
y+= h/50;
if(y+ms*mas.height > h)
y=h-ms*mas.height-h/25;
if(y<0)
y=0;
if(x<0)
x=0;
if(x>w-ms*mas.width)
x=w-ms*mas.width;
ctx.drawImage(mas, x, y, ms*mas.width, ms*mas.height);

shooter--;
drawGun();
if(fired)
trackBullet();
dead = isDead();
if(dead > 0) {
x=ms*mas.width;
y = h - ms*mas.height;
}
if(!won && x == w-ms*mas.width)
won = 100;
if(won > 0) {
won--;
winner();
if(won <= 0) {
x=ms*mas.width;
y = h-ms*mas.height;
}
}
}

function drawGun()
{
var xg = w-gs*gun.width,
yg = y+Math.floor((0.5-Math.random())*2*ms*mas.height);
if(!won)
ctx.drawImage(gun, xg, yg, gs*gun.width, gs*gun.height);
if(shooter < 0 && !fired && !won)
fireGun(xg, yg);
}

97
function fireGun(xg, yg)
{
var snd = new Audio();
snd.src = "shoot/shot.mp3";
snd.play();
xb = xg;
yb = yg;
ctx.drawImage(bullet, xb, yb, bs*bullet.width, bs*bullet.height);
fired = true;
}

function trackBullet()
{
xb -= w/15;
if(xb > 0)
ctx.drawImage(bullet, xb, yb, bs*bullet.width, bs*bullet.height);
else {
fired = false;
shooter = Math.floor(Math.random()*30);
}
}

function isDead()
{
if(y == h-ms*mas.height)
if((x>w*0.2 && x<w*0.3) || (x>w*0.5 && x<w*0.6) || (x>w*0.8 &&
x<w*0.9))
return 100;
if(yb > y && yb-y < ms*mas.height)
if(Math.abs(xb-x) < ms*mas.width)
return 100;
return 0;
}

function winner()
{
ctx.fillStyle = "#00FF00";
ctx.font = (h/10)+"pt Arial";
ctx.textAlign = "center";
ctx.fillText("Winner", w/2, h/2);
ctx.drawImage(diadem, x, y-ds*diadem.height+5, ds*diadem.width,
ds*diadem.height);
(won%2==0) ? win1.play(): win2.play();
98
}

function lost()
{
ctx.fillStyle = "#FF0000";
ctx.font = (h/10)+"pt Arial";
ctx.textAlign = "center";
ctx.fillText("Looser", w/2, h/2);
loose.play();
}
7) To test the game, enter the URL http://127.0.0.1/<name>/shoot.html.
Start playing the game. Customize it to suit your taste.
Ex. No.: 52-A
Date: 03.04.2018
AIM: To create an accounting system using cash, balance and asset transactions
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
4) Open command prompt (Press Windows+R, type cmd and press Enter).
5) Type cd \xampp\htdocs\<your folder>.
6) Issue the command md acc1 to create a folder for accounting files. Type
cd acc1 to change to acc1 folder.
7) Type notepad db.php. Choose YES when notepad seeks confirmation to
create a new file. This file creates a connection to MySQL database server,
creates a database (if not already available), uses the new database and
creates a table for accounting (if not already available).
<?php
$dbName = "vn1";//Type your name for database

$db = mysqli_connect("localhost","root","");

if(mysqli_connect_errno()) {
printf("Error in connecting to MySQL
server\n"+mysqli_connect_errno());
return;
}

$q = "create database IF NOT EXISTS " . $dbName . ";";


if($db->query($q) != true) {
echo "Error in creating database " . $dbName;
return;
}
99
$q = "use " . $dbName . ";";
if($db->query($q) != true) {
echo "Error in changing database to " . $dbName;
return;
}

$q = "create table IF NOT EXISTS account (id bigint auto_increment primary


key, dt date, type varchar(25), description varchar(250), head varchar(50),
amount double, count double);";
if($db->query($q) != true) {
echo "Error in creating account table";
return;
}
?>
8) Then, type notepad entry.html in the command line. Type the following
script and save:
<html>
<head>
<title>Transaction entry</title>
<script>
function checkAsset()
{
var val = trFrm.type.value,
row = document.getElementById("cntRow");
if(val == "ASSET" || val == "ASSET ADDED" || val == "ASSET DISPOSED")
row.style.visibility = "visible";
else
row.style.visibility = "hidden";
}
</script>
</head>

<body>
<form name="trFrm" action="insert.php" method="POST">
<center>
<h1 style="color:red">Transaction entry</h1>
<table>
<tr>
<td>Date</td><td>:</td>
<td><input type="date" name="dt" placeholder="Date"><br /></td>
</tr>
<tr>
<td>Type</td><td>:</td>
100
<td>
<select name="type" onChange="checkAsset()">
<option value="INCOME">INCOME</option>
<option value="EXPENSE">EXPENSE</option>
<option value="CASH">CASH</option>
<option value="BALANCE">BALANCE</option>
<option value="BALANCE ADDED">BALANCE ADDED</option>
<option value="BALANCE DIMINISHED">BALANCE DIMINISHED</option>
<option value="ASSET">ASSET</option>
<option value="ASSET ADDED">ASSET ADDED</option>
<option value="ASSET DISPOSED">ASSET DISPOSED</option>
</select>
</td>
</tr>
<tr>
<td>Description</td><td>:</td>
<td><input type="text" name="desc"></td>
</tr>
<tr>
<td>Head of account</td><td>:</td>
<td><input type="text" name="head"></td>
</tr>
<tr>
<td>Amount</td><td>:</td>
<td><input type="text" name="amt"></td>
</tr>
<tr id="cntRow" style="visibility:hidden">
<td>Count</td>
<td>:</td>
<td><input type="text" name="cnt" value="1"></td>
</tr>

</table>
<input type="submit" value="Enter transaction">
<input type="reset" value="Reset">
</center>
</form>
</body>
</html>
9) The above HTML file contains a form named trFrm with action value of
entry.php. Hence, it is necessary to create a file named entry.php and
place the file at \xampp\htdocs\<name>\acc.

101
10) Issue the command notepad insert.php at the command prompt. Press
YES when prompted to create a new file. Type the following script and
save the file:
<?php
require_once('db.php');

$dt = $_POST['dt'];
$type = $_POST['type'];
$desc = $_POST['desc'];
$h = $_POST['head'];
$amt = $_POST['amt'];
$cnt = $_POST['cnt'];
if($type != "ASSET" && $type != "ASSET ADDED" && $type != "ASSET
DISPOSED")
$cnt=1;

$q = "insert into account (dt, type, description, head, amount, count) values
('" .
$dt . "','" . $type . "','" . $desc . "','" . $h . "'," . $amt . "," . $cnt . ");";

if($db->query($q) == true) {
echo "<center><h1 style='color:green'>Successfully inserted the record
vide record ID " .
$db->insert_id ."</h1></center>";
}
else echo "<center><h1 style='color:red'>Error in query " . $q .
": " . $db->error . "</h1></center>";
?>
11) Open firefox browser. Enter the URL
http://127.0.0.1/<name>/acc1/entry.html. Enter the values sought by the
form and press enter transaction button.
12) The data entered in the form is submitted to the insert.php script. It
receives all form data using $_POST[‘name’] array in PHP.
13) Now, open command prompt. Type cd \xampp\mysql\bin. The issue the
command ‘mysql 0 root –D <fbname> –p ’;
14) Verify that the account entries/ transactions are properly displayed.
15) Enter the following transactions in the form:
Date Type Description Head Amount Count
2018-01- BALANCE Bank balance SBI 2,300
01
2018-01- INCOME Salary for Dec Salary 15,000
04 17

102
Date Type Description Head Amount Count
2018-01- EXPENSE Groceries Home 732
04
2018-01- EXPENSE Rent for home Rent 3,000
05
2018-01- ASSET ADDED Flower Flower 5,000 20
25 bouquet
2018-01- ASSET DISPOSED Flower Flower 15,000 20
26 bouquet
2018-01- EXPENSE Groceries Home 521
26
2018-01- BALANCE ADDED Bank deposit SBI 10,000
26
2018-02- INCOME Salary for Jan Salary 15,000
02 18
2018-02- EXPENSE Groceries Home 802
02
2018-02- EXPENSE Rent for home Rent 3,000
05
2018-02- BALANCE ADDED Bank deposit SBI 10,000
06
2018-02- BALANCE Withdrawal SBI 6,000
26 DIMINISHED
2018-01- ASSET ADDED Flower Flower 4,800 20
25 bouquet
2018-01- ASSET DISPOSED Flower Flower 17,500 20
26 bouquet
2018-01- BALANCE ADDED Bank deposit SBI 17,000
26

Ex. No.: 52-B


Date: 03.04.2018
AIM: To display income and expense statement for accounts
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
4) Open command prompt (Press Windows+R, type cmd and press Enter).
5) Type cd \xampp\htdocs\<your folder>.
6) Type cd acc1 to change to acc1 folder.
7) Type notepad report.html. Choose YES when notepad seeks confirmation
to create a new file.
103
<html>
<head>
<title>Report</title>
</head>

<body>
<center>
<a href="incomeexpense.php?disp=1"><input type="button" value="Income-
Expense statement"></a><br />
<a href="assetsliabilities.php?disp=1"><input type="button" value="Assets-
Liabilities statement"></a><br />
<a href="profitslosses.php?disp=1"><input type="button" value="Profits-
Losses statement"></a><br />
<a href="balancesheet.php"><input type="button" value="Balance
sheet"></a><br />
</center>
</body>
</html>
8) Then, type notepad incomeexp.php in the command line. Type the
following script and save:
<?php
include_once('db.php');

$disp = isset($_GET['disp']);
$head = getHd($db);
$income = array();

for($i=0; $i < count($head); $i++)


$income[$i] = getIncome($db, $head[$i]);

$istr1 = "<body><center><h1 style='font-size:150%;color:red'>Income and


expense statement</h1><table border=2 style='font-size:150%'><br />";
$istr1 .= "<tr><th colspan=2>Assets</th><th
colspan=2>Liabilities</th></tr><br />";
$istr1 .=
"<tr><th>Head</th><th>Amount</th><th>Head</th><th>Amount</th><br
/>";

$ti = $te = 0;
$istr = "";
for($i=0; $i < count($head); $i++) {
$istr .= assembleIncome($head[$i], $income[$i]);
$income[$i]<0 ? $te+= $income[$i]:$ti+= $income[$i];
104
}
$excessi = ($ti > abs($te)) ? $ti : abs($te);
$istr2 = "";
if($ti > $te)
$istr2 .= assembleIncome("Excess of income over expense", -
1*($ti+$te));
else
$istr2 .= assembleIncome("Excess of expense over income", $ta+$tli);

$istr2 .= "<tr><td style='font-weight:bold'>Total</td><td


style='color:green;font-weight:bold;text-align:right'>" .
number_format($excessi) . "</td><td style='font-weight:bold'>Total</td><td
style='color:red;font-weight:bold;text-align:right'> " .
number_format($excessi) . "</td></tr><br />";
$istr2 .= "</table></center></body>";

if($disp)
echo $istr1 . $istr . $istr2;

function getHd($db) {
$q = "select head from account where " .
"type='INCOME' or type='CASH' or type='EXPENSE' " .
"group by head order by head;";
$res = $db->query($q);
$h = array();
$i = 0;

while($row = $res->fetch_array(MYSQLI_BOTH))
$h[$i++] = $row["head"];
return $h;
}

function getIncome($db, $h)


{
$q = "select sum(amount) as amt from account where head='$h' and (" .
"type='INCOME' or type='CASH');";
$res = $db->query($q);
if($res->num_rows > 0) {
$row = $res->fetch_array(MYSQLI_BOTH);
$x = $row["amt"];
}
else $x = 0;

105
$q = "select sum(amount) as amt from account where head='$h' and " .
"type='EXPENSE';";
$res = $db->query($q);
if($res->num_rows > 0) {
$row = $res->fetch_array(MYSQLI_BOTH);
$y = $row["amt"];
}
else $y=0;

return $x-$y;
}

function assembleIncome($h, $a)


{
$s = "";
if($a < 0)
$s .= "<tr><td></td><td style='color:green;text-
align:right'></td><td>$h</td><td style='color:red;text-align:right'>" .
number_format(abs($a)) . "</td></tr>";
else if($a > 0)
$s .= "<tr><td>$h</td><td style='color:green;text-align:right'>" .
number_format($a) . "</td><td></td><td></td></tr>";
return $s;
}
?>
9) Test the script by entering the URL http://127.0.0.1/report.html and
clicking the link Income-Expense statement.

106
Ex. No.: 52-C
Date: 05.04.2018
AIM: To display assets and liabilities statement for accounts
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
4) Open command prompt (Press Windows+R, type cmd and press Enter).
5) Type cd \xampp\htdocs\<your folder>.
6) Type cd acc1 to change to acc1 folder.
7) Then, type notepad assetsliabilities.php in the command line. Type the
following script and save:
<?php
include_once('db.php');

$disp = isset($_GET['disp']);
$head = getHead($db);
$asset = array();

for($i=0; $i < count($head); $i++)


$asset[$i] = getBalance($db, $head[$i])+getAsset($db, $head[$i]);

$astr1 = "<body><center><h1 style='font-size:150%;color:red'>Assets and


Liabilities statement</h1><table border=2 style='font-size:150%'><br />";
$astr1 .= "<tr><th colspan=2>Assets</th><th
colspan=2>Liabilities</th></tr><br />";
$astr1 .=
"<tr><th>Head</th><th>Amount</th><th>Head</th><th>Amount</th><br
/>";

$ta = $tli = 0;
$astr = "";
for($i=0; $i < count($head); $i++) {
$astr .= assembleAsset($head[$i], $asset[$i]);
$asset[$i]<0 ? $tli+= $asset[$i]:$ta+= $asset[$i];
}
$excessa = ($ta > abs($tli)) ? $ta : abs($tli);
$astr2 = "";
if($ta > $tli)
$astr2 .= assembleAsset("Excess of liabilities over assets", -
1*($ta+$tli));
else
$astr2 .= assembleAsset("Excess of assets over liabilities", $ta+$tli);
107
$astr2 .= "<tr><td style='font-weight:bold'>Total</td><td
style='color:green;font-weight:bold;text-align:right'>" .
number_format($excessa) . "</td><td style='font-weight:bold'>Total</td><td
style='color:red;font-weight:bold;text-align:right'> " .
number_format($excessa) . "</td></tr><br />";
$astr2 .= "</table></center></body>";

if($disp)
echo $astr1 . $astr . $astr2;

function getHead($db) {
$q = "select head from account where " .
"type='BALANCE' or type='BALANCE ADDED' or type='BALANCE
DIMINISHED' or " .
"type='ASSET' or type='ASSET ADDED' or type='ASSET DISPOSED' group
by head order by head;";
$res = $db->query($q);
$h = array();
$i = 0;

while($row = $res->fetch_array(MYSQLI_BOTH))
$h[$i++] = $row["head"];
return $h;
}

function getBalance($db, $h)


{
$q = "select sum(amount) as amt from account where head='$h' and (" .
"type='BALANCE' or type='BALANCE ADDED');";
$res = $db->query($q);
if($res->num_rows > 0) {
$row = $res->fetch_array(MYSQLI_BOTH);
$x = $row["amt"];
}
else $x = 0;

$q = "select sum(amount) as amt from account where head='$h' and " .


"type='BALANCE DIMINISHED';";
$res = $db->query($q);
if($res->num_rows > 0) {
$row = $res->fetch_array(MYSQLI_BOTH);
$y = $row["amt"];
108
}
else $y=0;

return $x-$y;
}

function getAsset($db, $h)


{
$q = "select sum(count) as cnt, sum(amount) as amt from account where
head='$h' and (" .
"type='ASSET' or type='ASSET ADDED');";
$res = $db->query($q);
if($res->num_rows > 0) {
$row = $res->fetch_array(MYSQLI_BOTH);
$cx = $row["cnt"];
$ax = $row["amt"];
}
else $cx = $ax = 0;

$q = "select sum(count) as cnt, sum(amount) as amt from account where


head='$h' and type='ASSET DISPOSED';";
$res = $db->query($q);
if($res->num_rows > 0) {
$row = $res->fetch_array(MYSQLI_BOTH);
$cy = $row["cnt"];
$ay = $row["amt"];
}
else $cy = $ay = 0;

if(abs($cx - $cy) < 0.0001)


return 0;
return $ax-$ay;
}

function assembleAsset($h, $a)


{
$s = "";
if($a < 0)
$s .= "<tr><td></td><td style='color:green;text-
align:right'></td><td>$h</td><td style='color:red;text-align:right'>" .
number_format(abs($a)) . "</td></tr>";
else if($a > 0)

109
$s .= "<tr><td>$h</td><td style='color:green;text-align:right'>" .
number_format($a) . "</td><td></td><td></td></tr>";
return $s;
}
?>
8) Test the script by entering the URL http://127.0.0.1/report.html and
clicking the link Assets-Liabilities statement.
Ex. No.: 52-D
Date: 05.04.2018
AIM: To display profits and losses statement for accounts
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
4) Open command prompt (Press Windows+R, type cmd and press Enter).
5) Type cd \xampp\htdocs\<your folder>.
6) Type cd acc1 to change to acc1 folder.
7) Then, type notepad profitslosses.php in the command line. Type the
following script and save:
<?php
include_once('db.php');

$disp = isset($_GET['disp']);
$head = getHeads($db);
$profit = array();

for($i=0; $i < count($head); $i++)


$profit[$i] = getProfit($db, $head[$i]);

$pstr1 = "<body><center><h1 style='font-size:150%;color:red'>Profit and loss


statement</h1><table border=2 style='font-size:150%'><br />";
$pstr1 .= "<tr><th colspan=2>Profit</th><th colspan=2>Loss</th></tr><br
/>";
$pstr1 .=
"<tr><th>Head</th><th>Amount</th><th>Head</th><th>Amount</th><br
/>";

$tp = $tl = 0;

$pstr = "";
for($i=0; $i < count($head); $i++) {
$pstr .= assembleProfit($head[$i], $profit[$i]);
$profit[$i]<0 ? $tl+= $asset[$i]:$tp+= $profit[$i];
110
}

$excessp = ($tp > abs($tl)) ? $tp : abs($tl);

$pstr2 = "";
if($tp > $tl)
$pstr2 .= assembleProfit("Excess of profit over loss", -1*($tp+$tl));
else
$pstr2 .= assembleProfit("Excess of loss over profit", $tp+$tl);

$pstr2 .= "<tr><td style='font-weight:bold'>Total</td><td


style='color:green;font-weight:bold;text-align:right'>" .
number_format($excessp) . "</td><td style='font-weight:bold'>Total</td><td
style='color:red;font-weight:bold;text-align:right'> " .
number_format($excessp) . "</td></tr><br />";
$pstr2 .= "</table></center></body>";

if($disp)
echo $pstr1 . $pstr . $pstr2;

function getHeads($db) {
$q = "select head from account where " .
"type='ASSET DISPOSED' group by head order by head;";
$res = $db->query($q);
$h = array();
$i = 0;

while($row = $res->fetch_array(MYSQLI_BOTH))
$h[$i++] = $row["head"];
return $h;
}

function getProfit($db, $h)


{
$q = "select sum(count) as cnt, sum(amount) as amt from account where
head='$h' and (" .
"type='ASSET' or type='ASSET ADDED');";
$res = $db->query($q);
if($res->num_rows > 0) {
$row = $res->fetch_array(MYSQLI_BOTH);
$cx = $row["cnt"];
$ax = $row["amt"];
}
111
else {
$cx = 1;
$ax = 0;
}

$q = "select sum(count) as cnt, sum(amount) as amt from account where


head='$h' and type='ASSET DISPOSED';";
$res = $db->query($q);
if($res->num_rows > 0) {
$row = $res->fetch_array(MYSQLI_BOTH);
$cy = $row["cnt"];
$ay = $row["amt"];
}
else {
$cy = 1;
$ay = 0;
}

return ($ay/$cy-$ax/$cx)*$cy;
}

function assembleProfit($h, $a)


{
$s = "";
if($a < 0)
$s .= "<tr><td></td><td style='color:green;text-
align:right'></td><td>$h</td><td style='color:red;text-align:right'>" .
number_format(abs($a)) . "</td></tr>";
else if($a > 0)
$s .= "<tr><td>$h</td><td style='color:green;text-align:right'>" .
number_format($a) . "</td><td></td><td></td></tr>";
return $s;
}
?>
8) Test the script by entering the URL http://127.0.0.1/report.html and
clicking the link Profits-Losses statement.
Ex. No.: 52-E
Date: 05.04.2018
AIM: To display Balance sheet for accounts
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
112
4) Open command prompt (Press Windows+R, type cmd and press Enter).
5) Type cd \xampp\htdocs\<your folder>.
6) Type cd acc1 to change to acc1 folder.
7) Then, type notepad balancesheet.php in the command line. Type the
following script and save:
<?php
include_once('db.php');
include_once('assetsliabilities.php');
include_once('incomeexp.php');
include_once('profitslosses.php');

$bstr1 = "<body><center><h1 style='font-size:150%;color:red'>Balance


sheet</h1><table border=2 style='font-size:150%'><br />";

$bstr = "<tr><th colspan=2>Assets</th><th


colspan=2>Liabilities</th></tr><br />";
$bstr .=
"<tr><th>Head</th><th>Amount</th><th>Head</th><th>Amount</th><br
/>";
$bstr .= $istr;
$bstr .= $astr;
$bstr .= $pstr;

$balx = $ti + $ta + $tp;


$baly = $te + $tli + $tl;

$totalb = ($balx > abs($baly)) ? $balx:abs($baly);


if($balx > abs($baly))
$bstr2 = "<tr><td></td><td></td><td style='font-weight:bold;text-
align:center'>Excess of assets over liabilities</td><td style='text-
align:right;font-weight:bold;color:green'>" . number_format($balx+$baly) .
"</td></tr>";
else
$bstr2 = "<tr><td style='font-weight:bold;text-align:center'>Excess of
liabilities over assets</td><td style='text-align:right;font-
weight:bold;color:green'>" . number_format(abs($balx+$baly)) .
"</td><td></td><td></td></tr>";

$bstr2 .= "<tr><td style='text-align:center;font-weight:bold'>Total</td><td


style='text-align:right;font-weight:bold;color:green'>" .
number_format($totalb) . "</td>";

113
$bstr2 .= "<td style='text-align:center;font-weight:bold'>Total</td><td
style='text-align:right;font-weight:bold;color:red'>" .
number_format($totalb) . "</td>";
echo $bstr1 . $bstr . $bstr2;
?>
8) Test the script by entering the URL http://127.0.0.1/report.html and
clicking the link Balance sheet.
Ex. No.: 53
Date: 09.04.2018
AIM: To create a HTML file for submission of online application for ITI
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
4) Open command prompt (Press Windows+R, type cmd and press Enter).
5) Type cd \xampp\htdocs\<your folder>.
6) Type MD app in command prompt and press enter. Type cd app to change
to app folder.
7) Then, type notepad application.html in the command line. Type the
following script and save:
<html>
<head>
<title>
Online application form
</title>
<script type="text/javascript" language="javascript" src="application.js">
</script>
</head>

<body style="background-color:#AAAACC;color:red;font-size:120%">
<center>
<h1 style="color:#FF0000">Online Application for admission to ITI</h1>
<form name="app" method="POST" action="saveapp.php"
enctype="multipart/form-data">
<table border=0 style="background-color:#AACCAA;color:red;font-
size:200%">
<tr>
<td>Name</td>
<td>:</td>
<td><input type="text" name="name" onBlur="verifyBlank(this)"></td>
</tr>

<tr>
114
<td>Father Name</td>
<td>:</td>
<td><input type="text" name="fathername"
onBlur="verifyBlank(this)"></td>
</tr>

<tr>
<td>Date of birth</td>
<td>:</td>
<td><input type="date" name="dob" onBlur="verifyDate(this)"></td>
</tr>

<tr>
<td>Gender</td>
<td>:</td>
<td>
<select id="gender" name="gender">
<option value="female">Female</option>
<option value="male">Male</option>
<option value="trans">Trans-Gender</option>
</select>
</td>
</tr>

<tr>
<td>Door number and street</td>
<td>:</td>
<td>
<input type="text" name="street" onBlur="verifyBlank(this)">
</td>
</tr>

<tr>
<td>Village/ area/ landmark</td>
<td>:</td>
<td>
<input type="text" name="area" onBlur="verifyBlank(this)">
</td>
</tr>

<tr>
<td>City</td>
<td>:</td>
115
<td>
<input type="text" name="city" onBlur="verifyBlank(this)">
</td>
</tr>

<tr>
<td>PIN Code</td>
<td>:</td>
<td>
<input type="number" name="pin" onBlur="verifyBlank(this)">
</td>
</tr>

<tr>
<td>Mobile number</td>
<td>:</td>
<td>
<input type="number" name="mobile" onBlur="verifyLength(this,10)">
</td>
</tr>

<tr>
<td>Email</td>
<td>:</td>
<td>
<input type="email" name="email" onBlur="verifyBlank(this)">
</td>
</tr>

<tr>
<td>Qualification</td>
<td>:</td>
<td>
<select id="qualification" name="qualification">
<option name="10" value="SSLC">SSLC</option>
<option name="12" value="H.Sc.">H.Sc.</option>
</select>
</td>
</tr>

<tr>
<td>Percentage</td>
<td>:</td>
116
<td>
<input type="number" step=0.0001 name="percentage"
onBlur="verifyBlank(this)">
</td>
</tr>

<tr>
<td>Adhar</td>
<td>:</td>
<td>
<input type="number" name="adhar" onBlur="verifyLength(this,12)">
</td>
</tr>

<tr>
<td>Bank name</td>
<td>:</td>
<td>
<input type="text" name="bank">
</td>
</tr>

<tr>
<td>IFS Code of bank branch</td>
<td>:</td>
<td>
<input type="text" name="ifsc">
</td>
</tr>

<tr>
<td>Bank account number</td>
<td>:</td>
<td>
<input type="number" name="account">
</td>
</tr>

<tr>
<td>Community</td>
<td>:</td>
<td>
<select id="community" name="community">
117
<option name="OC" value="OC">OC</option>
<option name="EBC" value="EBC">EBC</option>
<option name="MBC" value="MBC">MBC</option>
<option name="OBC" value="OBC">OBC</option>
<option name="SC" value="SC">SC</option>
<option name="ST" value="ST">ST</option>
</select>
</td>
</tr>

<tr>
<td>Category</td>
<td>:</td>
<td>
<input type="checkbox" name="ex" value="EX">Ex-serviceman</input><br
/>
<input type="checkbox" name="ff" value="FF">Freedom Fighter</input><br
/>
<input type="checkbox" name="ph" value="PH">Physically
Handicapped</input><br />
<input type="checkbox" name="sp" value="SP">Sports</input><br />
</td>
</tr>

<tr>
<td>Passport size photo (limit 200kb)</td>
<td>:</td>
<td>
<input type="file" name="photo" id="photo"
onChange="verifyPhoto('photo','photoPrev',204800)">
</td>
</tr>

</table>
<input type="submit" value="Submit">
<input type="reset" value="Reset">

</form>
</center>
</body>
</html>
8) Type notepad application.js in the command prompt, choose YES to
create a new file, type the following content and save:
118
function verifyBlank(source) {
var s = source.value;
if(s == null || s.trim() === "")
alert(source.name + " should not be left blank!");
}

function verifyDate(source) {
var dr = new Date(source.value);
dr.setMonth(6);
var y = new Date((Date.now() - new Date(source.value))).getFullYear()-1970;
if(y<15)
alert("You should have attained 15 years of age to apply for
admission.");
}

function verifyLength(source, len) {


if(source.value.length != len)
alert(source.name+" should be "+len+" digits long");
}

function verifyPhoto(id) {
var img = document.getElementById(id);
var fl = img.files[0];

var nm = fl.name.toLowerCase();
if(!nm.endsWith(".png") && !nm.endsWith(".jpg"))
alert("Only JPG and PNG files are permitted");
if((fl.size/1024) > 200)
alert("File size is limited to 200kb for "+fl.name+" ("+(fl.size/1024)+"
kb)");
}
9) Type notepad saveapp.php, choose YES to create new file, enter the
following code and save the file.
<?php
require_once('db.php');

$n = $_POST['name'];
$fn = $_POST['fathername'];
$dob = $_POST['dob'];
$gender = $_POST['gender'];
$add1 = $_POST['street'];
$add2 = $_POST['area'];
$city = $_POST['city'];
119
$pin = $_POST['pin'];
$mob = $_POST['mobile'];
$email = $_POST['email'];
$q = $_POST['qualification'];
$p = $_POST['percentage'];
$adhar = $_POST['adhar'];
$bank = $_POST['bank'];
$ifsc = $_POST['ifsc'];
$acc = $_POST['account'];
$comm = $_POST['community'];

$cat = "";
$ex = isset($_POST['ex']);
$ff = isset($_POST['ff']);
$ph = isset($_POST['ph']);
$sp = isset($_POST['sp']);
if($ex) $cat .= "EX";
if($ff) $cat .= "FF";
if($ph) $cat .= "PH";
if($sp) $cat .= "SP";

$q = "insert into application values (0,'$n', '$fn','$dob', '$gender', '$add1',


'$add2', '$city', '$pin', '$mob', '$email', '$q', $p, '$adhar', '$bank', '$ifsc',
'$acc', '$comm', '$cat');";

$id=0;

if($db->query($q) == true)
$id = $db->insert_id;
else "Error in inserting values " . $db->error . " query: " . $q;

$target_file = "uploads/" . basename($id . "-photo.");


$imgFlType =
strtolower(pathinfo($_FILES['photo']['name'],PATHINFO_EXTENSION));
$target_file .= $imgFlType;

if(move_uploaded_file($_FILES["photo"]["tmp_name"], $target_file)) {
echo "<center><img src='" .
$target_file . "' width=10%></center>";
}

echo "<center><h1>Dear $n S/o. $fn, <br />";


echo "Your registration number is $id</h1>";
120
echo "<br /> <input type='button' value='print' onClick='window.print()'>
</center>";
?>
10) Type notepad db.php in the command prompt. Enter following code and
save the same:

<?php
$dbName = "vn1";//Type your name for database

$db = mysqli_connect("localhost","root","");

if(mysqli_connect_errno()) {
printf("Error in connecting to MySQL
server\n"+mysqli_connect_errno());
return;
}

$q = "create database IF NOT EXISTS " . $dbName . ";";


if($db->query($q) != true) {
echo "Error in creating database " . $dbName;
return;
}
$q = "use " . $dbName . ";";

if($db->query($q) != true) {
echo "Error in changing database to " . $dbName;
return;
}

$q = "create table if not exists application (insert_id bigint auto_increment


primary key, name varchar(50), father_name varchar(50), dob date, gender
varchar(50), address1 varchar(100), address2 varchar(100), city varchar(100),
pin varchar(20), mobile varchar(30), email varchar(50), qualification
varchar(10), percentage double, aadhaar varchar(20), bank varchar(50), ifsc
varchar(20), account varchar(30), community varchar(10), category
varchar(10));";

if($db->query($q) != true)
echo "Error in creating table";
?>
11) Test the program by typing the URL
http://127.0.0.1/<name>/app/application.html in the address bar of
browser.
121
12) Verify that the photo and application number are displayed correctly.
13) Type explorer uploads in the command prompt. Verify that the file
uploaded through the application form is available inside the uploads
folder.
Ex. No.: 54
Date: 11.04.2018
AIM: To create a Point of Sale (PoS) System using PHP and HTML
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
4) Open command prompt (Press Windows+R, type cmd and press Enter).
5) Type cd \xampp\htdocs\<your folder>.
6) Type MD pos in command prompt and press enter. Type cd pos to change
to app folder.
7) Then, type notepad db.php in the command line. This script creates the
database and tables required for PoS system. Type the following script
and save:
<?php
$dbName = "vn1";//Type your name for database
$db = mysqli_connect("localhost","root","");

if(mysqli_connect_errno()) {
printf("Error in connecting to MySQL server\n" .
mysqli_connect_errno());
return;
}

$q = "create database IF NOT EXISTS " . $dbName . ";";


if($db->query($q) != true) {
echo "Error in creating database " . $dbName;
return;
}

$q = "use " . $dbName . ";";


if($db->query($q) != true) {
echo "Error in changing database to " . $dbName;
return;
}

$q = "create table if not exists item (item_id bigint auto_increment primary


key, item_name varchar(30), rate double);";
if($db->query($q) != true)
122
echo "Error in creating item table";

$q = "create table if not exists bill (bill_no bigint auto_increment primary key,
dt date, amount double, cgst double, sgst double, total double);";
if($db->query($q) != true)
echo "Error in creating table bill";

$q = "create table if not exists transaction (tr_id bigint auto_increment primary


key, bill_no bigint not null, item_id bigint, item_name varchar(30), quantity
double, rate double, amount double);";
if($db->query($q) != true)
echo "Error in creating item table";

$bill_number=1;

session_start();
if(!isset($_SESSION['bill_number'])) {
session_start();
$q = "insert into bill (dt, amount, cgst, sgst, total) values (curdate(),
0,0,0,0);";
if($db->query($q) == true)
$bill_number = $db->insert_id;
$_SESSION['bill_number'] = $bill_number;
}
else $bill_number = $_SESSION['bill_number'];
?>
8) Then, type notepad pos.php in the command line. This script displays the
essential user interface for PoS system. Type the following script and save:
<?php
require_once('db.php');

echo "<body style='background-color:color:red;'>\n<center>\n";


echo "<h1>Point of Sale (POS) Billing System</h1>";
echo "<h1>Bill No.: $bill_number</h1>";
echo "<form name='itemFrm' method='POST' action='additem.php'>\n";
echo "<input type='text' name='nm' placeholder='Item name'>\n";
echo "<input type='text' name='rate' placeholder='Rate (Rs.)'>\n";
echo "<input type='submit' value='Add item'></form><br />\n";

echo "<form name='billFrm' method='POST' action='addtrans.php'>\n";


echo "<select name='item'>\n";
$q = "select item_id, item_name from item order by item_name";
123
$res = $db->query($q);
while($row = $res->fetch_array(MYSQLI_BOTH))
echo "<option name='" . $row['item_name'] . "-" . $row['item_id'] . "'>"
.
$row['item_name'] . "</option>\n";
echo "</select>";
echo "<input type='text' name='qty' placeholder='Quantity'>\n";
echo "<input type='submit' value='Add to bill'></form>\n";

echo "<form name='billPrint' method='POST' action='printbill.php'>\n";


echo "<input type='text' name='firm' placeholder='Name of firm'>\n";
echo "<input type='text' name='address' placeholder='Address of firm'>\n";
echo "<input type='text' name='mobile' placeholder='Mobile number of
firm'>\n";
echo "<input type='text' name='cgst' placeholder='CGST (%)'>\n";
echo "<input type='text' name='sgst' placeholder='SGST (%)'>\n";
echo "<input type='submit' value='Print bill'></form>\n";
echo "</center></form></body>";
?>
9) Type notepad additem.php in the command prompt. Choose YES to
create a new file, type the following code and save the file. This script adds
new items for sale.
<?php
require_once('db.php');
$nm = $_POST['nm'];
$rt = $_POST['rate'];
$q = "select item_id from item where item_name='" . $nm . "';";
$res = $db->query($q);

if($res->num_rows > 0) {
$row = $res->fetch_array(MYSQLI_BOTH);
$id = $row['item_id'];
$q = "update item set rate=" . $rt . "where item_id=" . $id . ";";
if($db->query($q) == true)
echo "<h1 style='text-align:center;color:green'>Successfully updated
rate for $nm to $rt</h1>";
else
echo "<h1 style='text-align:center;color:red'>Error in updating rate for
item $nm to $rt at item_id $id</h1>";
}
else {
$q = "insert into item (item_name, rate) values ('$nm',$rt);";
if($db->query($q) == true)
124
echo "<h1 style='text-align:center;color:green'>Successfully added item
name $nm with rate $rt at row id $db->insert_id</h1>";
}
echo "<center><a href='pos.php'>Go to PoS</a></center>";
?>
10) Type notepad addtrans.php in the command prompt. Choose YES to
create a new file, type the following code and save the file. This script adds
new transactions involving the sale of an item, quantity and amount for
each transaction.
<?php
require_once('db.php');
$nm = $_POST['item'];
$qty = $_POST['qty'];

$q="select item_id, rate from item where item_name='" . $nm . "';";


$res = $db->query($q);
if( $res->num_rows <= 0) {
echo "<h1 style='text-align:center;color:red'>Item $nm is not
found</h1>";
return;
}
$row = $res->fetch_array(MYSQLI_BOTH);
$id = $row['item_id'];
$rt = $row['rate'];
$amt = $qty * $rt;
$bill = $_SESSION['bill_number'];

$q = "insert into transaction (bill_no, item_id, item_name, quantity, rate,


amount) values ($bill, $id, '$nm', $qty, $rt, $amt);";
if($db->query($q)==true)
echo "<h1 style='text-align:center;color:green'>Successfully added the
transaction with ID " . $db->insert_id . "</h1>";
else
echo "<h1 style='text-align:center;color:red'>Error in query: $q</h1>";
?>

11) Type notepad printbill.php in the command prompt. Choose YES to


create a new file, type the following code and save the file. This script adds
new transactions involving the sale of an item, quantity and amount for
each transaction.
<?php
require_once('db.php');
$frm = $_POST['firm'];
125
$addr = $_POST['address'];
$mob = $_POST['mobile'];
$cg = $_POST['cgst'];
$sg = $_POST['sgst'];
$bill = $_SESSION['bill_number'];
$dt = date("Y-m-d");
$q = "select dt from bill where bill_no=" . $bill . ";";
$res = $db->query($q);
if($row = $res->fetch_array(MYSQLI_BOTH))
$dt = $row['dt'];

$q = "select sum(amount) as sum from transaction where bill_no=$bill;";


$res = $db->query($q);
$row = $res->fetch_array(MYSQLI_BOTH);

$item_total = $row['sum'];
$cgst = $cg * $item_total/100;
$sgst = $sg * $item_total/100;
$bill_total = ceil($item_total+$cgst+$sgst);
$adjustment = $bill_total - $item_total - $cgst - $sgst;

echo "<center><h1 style='color:red'>$frm</h1>\n";


echo "<center><span style='color:blue'>$addr<br />\n";
echo "Mobile: $mob</center>\n";
echo "<table border=0 width=100%><tr><td style='text-align:left'>Bill No.:
$bill</td><td style='text-align:right'>Date: $dt</td></tr></table><hr>";

echo "<table border=2 style='text-size:120%'>\n";


echo "<tr><th>Sl.
No.</th><th>Item</th><th>Quantity</th><th>Rate</th><th>Amount</th></
tr>\n";

$q = "select item_name, quantity, rate, amount from transaction where


bill_no=$bill;";

$res = $db->query($q);
$cnt = 1;
while($row = $res->fetch_array(MYSQLI_BOTH))
echo "<tr><td> " . $cnt++ . " </td><td> " .
$row['item_name'] . "</td><td style='text-align:right'>" .
$row['quantity'] . "</td><td style='text-align:right'>" .
$row['rate'] . "</td><td style='text-align:right;font-
weight:bold'>" .
126
$row['amount'] . "</td></tr>\n";

echo "<tr><td colspan=4 style='text-align:center;font-weight:bold'>Item


total</td><td style='text-align:right;font-
weight:bold'>$item_total</td></tr>\n";
echo "<tr><td colspan=4 style='text-align:center;font-
weight:bold'>CGST</td><td style='text-align:right;font-
weight:bold'>$cgst</td></tr>\n";
echo "<tr><td colspan=4 style='text-align:center;font-
weight:bold'>SGST</td><td style='text-align:right;font-
weight:bold'>$sgst</td></tr>\n";
echo "<tr><td colspan=4 style='text-align:center;font-weight:bold'>Rounding
adjustment</td><td style='text-align:right;font-weight:normal'>" .
round($adjustment,2) . "</td></tr>\n";
echo "<tr><td colspan=4 style='text-align:center;font-
weight:bold'>Total</td><td style='text-align:right;font-
weight:bold'>$bill_total</td></tr>\n";
echo "</table>\n";

$q = "update bill set amount=$item_total, cgst=$cgst, sgst=$sgst,


total=$bill_total where bill_no=$bill;";
session_destroy();
?>
12) After entering all the scripts, type the URL
http://127.0.0.1/<name>/pos/pos.php in the address bar of browser. Add
few items for sale. Create sales transactions for the bill number. Enter
name of firm, address, mobile number, CGST percentage and SGST
percentage. Press Print bill to print the bill.
Ex. No.: 55
Date: 12.04.2018
AIM: To create a Registration form using HTML and PHP
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
4) Open command prompt (Press Windows+R, type cmd and press Enter).
5) Type cd \xampp\htdocs\<your folder>.
6) Type MD reg in command prompt and press enter. Type cd reg to change
to app folder.
7) Then, type notepad db.php in the command line. This script creates the
database and table required for registration system. Type the following
script and save:
<?php
127
$dbName="divya";
$db = mysqli_connect("localhost","root","");
$q = "create database if not exists $dbName;";
$db->query($q);

$q = "use $dbName;";
$db->query($q);

$q = "create table if not exists student(reg_no bigint auto_increment primary


key, name varchar(50), dob date, mobile varchar(20), email varchar(50),
pass varchar(50));";
$db->query($q);
?>
8) Type the command notepad login.html, press YES to confirm creation of
new file. Type the following script and save the file:
<html>
<head>
<title>Student login</title>
</head>
<body>
<form name="loginFrm" method="POST" action="login.php">
<center>
Login ID: <input type="text" name="id"
placeholder="yourmail@some.com"><br />
Password: <input type="password" name="pass"><br />
<input type="submit" value="Login"> <input type="reset" value="Reset"><br
/>
<a href="register.html">Not a member? Register here.</a>
</center>
</form>
</body>
</html>
9) Type the command notepad login.php, choose YES to create new file,
type the following script and save the file:
<?php
require_once('db.php');
$id=$_POST['id'];
$p = $_POST['pass'];
$q = "select reg_no, name, dob, mobile from student where email='$id' and
pass='$p';";
$res = $db->query("$q");
if($res->num_rows <= 0)
echo "<h1>You are not registered!</h1>";
128
else {
$row = $res->fetch_array(MYSQLI_BOTH);
echo "Registration number: $row[0]<br />";
echo "Name: $row[1]<br />";
echo "DoB: $row[2]<br />";
echo "Mobile: $row[3]<br />";
}
10) Type the command notepad register.html, choose YES to create new file,
type the following script and save the file:
<html>
<head>
<title>Register yourself</title>
</head>
<body>
<form name="regFrm" method="POST" action="register.php">
<center>
Name: <input type="text" name="name" placeholder="Name"><br />
DoB: <input type="date" name="dob" placeholder="DoB"><br />
Mobile: <input type="text" name="mobile" placeholder="Mobile"><br />
Email ID: <input type="text" name="mail"
placeholder="yourmail@some.com"><br />
Password: <input type="password" name="pass1"><br />
Confirm password: <input type="password" name="pass2"
onBlur="if(pass1.value != pass2.value) alert('Password
mismatch!')"><br />
<input type="submit" value="Register">
</center>
</form>
</body>
</html>
11) Type the command notepad register.php, choose YES to create new file,
type the following script and save the file:
<?php
require_once('db.php');
$name = $_POST['name'];
$dob = $_POST['dob'];
$mob = $_POST['mobile'];
$mail = $_POST['mail'];
$p = $_POST['pass1'];
$q = "select reg_no from student where email='$mail';";
echo $q;
$res = $db->query($q);
if($res->num_rows > 0) {
129
echo "<h1>Your email ID $mail is already registered!</h1>";
return;
}
$q = "insert into student (name, dob, mobile, email, pass) values
('$name','$dob','$mob','$mail','$p');";
$res = $db->query($q);
if($res == true)
echo "<h1>Congrats! You are registered with ID: $db->insert_id</h1>";
else
echo "<h1>Error in registering you!</h1>";
?>
12) Open Firefox browser. Enter the URL
http://127.0.0.1/<name>/reg/login.html. Verify that the registration and
login functions are correctly performed.
Ex. No.: 56
Date: 13.04.2018
AIM: To create a budget management system using HTML and PHP
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
4) Open command prompt (Press Windows+R, type cmd and press Enter).
5) Type cd \xampp\htdocs\<your folder>.
6) Type MD budget in command prompt and press enter. Type cd budget to
change to app folder.
7) Then, type notepad db.php in the command line. This script creates the
database and table required for budget management system. Type the
following script and save:
<?php
$dbName = "budget";//Type your name for database

$db = mysqli_connect("localhost","root","");

if(mysqli_connect_errno()) {
printf("Error in connecting to MySQL server\n"+mysqli_connect_errno());
return;
}

$q = "create database IF NOT EXISTS " . $dbName . ";";


if($db->query($q) != true) {
echo "Error in creating database " . $dbName;
return;
}
130
$q = "use " . $dbName . ";";
if($db->query($q) != true) {
echo "Error in changing database to " . $dbName;
return;
}

$q = "create table IF NOT EXISTS head (id bigint auto_increment primary key,
head varchar(100));";
if($db->query($q) != true) {
echo "Error in creating table for head of account";
return;
}

$q = "create table IF NOT EXISTS bill (id bigint auto_increment primary key,
bill_number bigint, dt date, type varchar(25), description varchar(250),
head varchar(50), amount double);";
if($db->query($q) != true) {
echo "Error in creating account table";
return;
}
?>
8) Type notepad budget.php (which is the opening page of the project) in
the command line, enter following script and save the file:
<html>
<head>
<title>Budget management system</title>
<style>
a {background-color:#CCFFCC;color:red;text-align:center;font-
weight:bold;font-size:150%}
body {background-color:#CCAACC}
</style>
</head>

<body>
<center>
<a href="addhead.html">Add new head of account</a>
<a href="newbill.php">New bill</a>
<a href="allocation.php">Manage budget allocation</a>

<?php
include_once('db.php');
echo "<h1>Fund status</h1>";
$h[0]="0";
131
$q = "select head from head order by head;";
$res = $db->query($q);
$cnt=0;
while($row = $res->fetch_array(MYSQLI_BOTH)) {
$h[$cnt++] = $row[0];
}
echo "<table border=2 style='font-size:120%'><tr><th>Sl. No.</th><th>Head
of account</th><th>Balance amount</th></tr>";
$total = 0;
for($i=0; $i<$cnt; $i++) {
$bal = getAmt($db, 'BALANCE ADDED',$h[$i]) - getAmt($db,'BALANCE
DIMINISHED',$h[$i]);
$total += $bal;
echo "<tr><td>" . ($i+1) . "</td><td>$h[$i]</td><td style='text-
align:right;color:blue;font-weight:bold'> $bal </td></tr>";
}
echo "<tr><td colspan=2 style='font-weight:bold;text-
align:center'>Total</td><td style='text-align:right;font-
weight:bold;color:red;'>$total</td></tr></table>";

function getAmt($db, $t, $h)


{
$q = "select sum(amount) as sum from bill where type='$t' and head='$h';";
$res = $db->query($q);
if($row = $res->fetch_array(MYSQLI_BOTH))
return $row[0];
return 0;
}
?>
</center>
</body>
</html>
9) Type notepad addhead.html in the command line, enter following script
and save the file:
<html>
<head>
<title>Add new head</title>
</head>
<body>
<form name="headFrm" method="POST" action="addhead.php">
<center>
<h1>Add new head of account</h1>
<table>
132
<tr><td>New head</td><td>:</td>
<td><input type="text" name="newhead"></td>
</tr>
</table>
<input type="submit" value="Add new head">
</center>
</form>
</body>
</html>
10) Type notepad addhead.php in the command line, enter following script
and save the file:
<?php
require_once('db.php');
$hd = $_POST['newhead'];
$q = "insert into head (head) values ('$hd');";
if($db->query($q) == true)
echo "<h1 style='color:green'>Successfully created new head</h1>";
else
echo "<h1 style='color:red'>Error in query: $q</h1>";
echo "<a href='budget.html'>Return to home page</a>";
?>
11) Type notepad newbill.php in the command line, enter following script
and save the file:
<?php
require_once('db.php');
echo "<html><head><title>New bill</title></head><body style='background-
color:#CCFFCC;color:red'>\n";
echo "<form name='billFrm' method='POST' action='billentry.php'>\n";
echo "<center><h1>Make entry for new bill</h1><table>\n";

echo "<tr><td>Bill number</td><td>:</td><td><input type='text'


name='number'></td></tr>\n";
echo "<tr><td>Date</td><td>:</td><td><input type='date'
name='date'></td></tr>\n";
echo "<tr><td>Description</td><td>:</td><td><input type='text'
name='desc'></td></tr>\n";
echo "<tr><td>Head</td><td>:</td><td><select name='head'>\n";
$q = "select head from head order by head;";
$res = $db->query($q);
while($row = $res->fetch_array(MYSQLI_BOTH))
echo "<option value='$row[0]'>$row[0]</option>\n";
echo "</select></td></tr>\n";

133
echo "<tr><td>Amount</td><td>:</td><td><input type='number'
name='amount'></td></tr>\n";
echo "</table><input type='submit' value='Save bill
details'></center></form></body></html>\n";
?>
12) Type notepad billentry.php in the command line, enter following script
and save the file:
<?php
require_once('db.php');
$n = $_POST['number'];
$dt = $_POST['date'];
$desc = $_POST['desc'];
$hd = $_POST['head'];
$amt = $_POST['amount'];

$q = "insert into bill (bill_number, dt, type, description, head, amount) values
($n,'$dt','BALANCE DIMINISHED','$desc','$hd',$amt);";
if($db->query($q) == true)
echo "<h1 style='text-align:center;color:green'>Bill entry was made
successfully!</h1>\n";
else
echo "<h1 style='text-align:center;color:red'>Error in query:
$q</h1>\n";
?>
13) Type notepad allocation.php in the command line, enter following script
and save the file:
<?php
require_once('db.php');

echo "<body style='background-color:#AAFFCC'><form name='allocation'


method='POST' action='modify.php'><center><table style='color:red;font-
weight:bold'>\n";
echo "<h1>Make budget or revised budget allocation of fund</h1>";
echo "<tr><td>Date of effect</td><td>:</td><td><input type='date'
name='date'></td></tr>\n";
echo "<tr><td>Mode of allocation</td><td>:</td>";
echo "<td><select name='mode'><option value='BE Allocation'>BE
Allocation</option><option value='RE Allocation'>RE
Allocation</option><option value='Modification of fund'>Modification of
fund</option></select></td></tr>\n";
echo "<tr><td>Head of account</td><td>:</td><td><select name='head'>";

$q = "select head from head order by head;";


134
$res = $db->query($q);
while($row = $res->fetch_array(MYSQLI_BOTH))
echo "<option value='$row[0]'>$row[0]</option>\n";
echo "</select></td></tr>\n";
echo "<tr><td>Amount</td><td>:</td><td><input type='number'
name='amt'></td></tr>\n";
echo "<tr><td colspan=3 style='text-align:center'><input type='submit'
name='Make allocation'></td></tr>\n";
echo "</center></table></form></body>";
?>
14) Type notepad modify.php in the command line, enter following script
and save the file:
<?php
require_once('db.php');
$dt = $_POST['date'];
$mode = $_POST['mode'];
$head = $_POST['head'];
$amt = $_POST['amt'];

$bal = 0;
$q = "select sum(amount) as amt from bill where type='BALANCE ADDED' and
head='$head';";
$res = $db->query($q);
if($row = $res->fetch_array(MYSQLI_BOTH))
$bal = $row[0];
$q = "select sum(amount) as amt from bill where type='BALANCE
DIMINISHED' and head='$head';";
$res = $db->query($q);
if($row = $res->fetch_array(MYSQLI_BOTH))
$bal -= $row[0];
if($bal > 0) {
$q = "insert into bill (bill_number, dt, type, description,
head, amount) values (0,'$dt','BALANCE DIMINISHED','$mode -
Surrender','$head',$bal);";
if($db->query($q) != true)
echo "<h1 style='color:red'>Error in surrender of
funds</h1>";
}
else if($bal < 0) {
$q = "insert into bill (bill_number, dt, type, description,
head, amount) values (0,'$dt','BALANCE ADDED','$mode -
Surrender','$head',-1*$bal);";
if($db->query($q) != true)
135
echo "<h1 style='color:red'>Error in make over
deficit of funds</h1>";
}
$q = "insert into bill (bill_number, dt, type, description, head, amount) values
(0,'$dt','BALANCE ADDED','$mode - new allocation','$head',$amt);";
if($db->query($q) != true)
echo "<h1 style='color:red'>Error in $mode allocation of
funds</h1>";
else
echo "<h1 style='color:green'>Successfully modified the
fund position</h1>";
echo "<a href='budget.php'>Go to budget home</a>";
?>
15) Test the script by typing http://127.0.0.1/budget/budget.php in the
address bar of browser.
Ex. No.: 57-A
Date: 16.04.2018
AIM: To create a question bank for online testing system
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
4) Open command prompt (Press Windows+R, type cmd and press Enter).
5) Type cd \xampp\htdocs\<your folder>.
6) Type MD test in command prompt and press enter. Type cd test to change
to app folder.
7) Then, type notepad db.php in the command line. This script creates the
database and table required for creating a question bank table and test
score table. Type the following script and save:
<?php
$dbName = "vn";//Type your name for database
$db = mysqli_connect("localhost","root","");
if(mysqli_connect_errno()) {
printf("Error in connecting to MySQL server\n"+mysqli_connect_errno());
return;
}
$q = "create database IF NOT EXISTS " . $dbName . ";";
if($db->query($q) != true) {
echo "Error in creating database " . $dbName;
return;
}
$q = "use " . $dbName . ";";
if($db->query($q) != true) {
136
echo "Error in changing database to " . $dbName;
return;
}

$q = "create table IF NOT EXISTS quest (id bigint auto_increment primary key,
question varchar(1000), a varchar(255), b varchar(256), c varchar(256), d
varchar(256), answer varchar(1));";
if($db->query($q) != true) {
echo "Error in creating table for question";
return;
}
$q = "create table IF NOT EXISTS test (id bigint auto_increment primary key,
name varchar(50), roll_number varchar(14), max_questions int,
questions varchar(1000), right_answers varchar(1000), answers_given
varchar(1000), number_of_right_answers int, mark double);";
if($db->query($q) != true) {
echo "Error in creating table for test";
return;
}
?>
8) Type notepad quest.html in command prompt to create the HTML script
for receiving questions, 4 options and right answer. Type the following
script and save the file:
<html>
<head>
<title>Question bank for online test</title>
</head>
<body style="background-color:#CCFFDD;color:red">
<form name="questFrm" method="POST" action="quest.php">
<center>
<h1>Question bank creation for online test</h1>
<table>
<tr><td>Question</td><td><textarea name="quest" rows="4" cols="50"
placeholder="Question"></textarea></td></tr>
<tr><td>Option (a)</td><td><textarea name="a" rows="1" cols="50"
placeholder="Option (a)"></textarea></td></tr>
<tr><td>Option (b)</td><td><textarea name="b" rows="1" cols="50"
placeholder="Option (b)"></textarea></td></tr>
<tr><td>Option (c)</td><td><textarea name="c" rows="1" cols="50"
placeholder="Option (c)"></textarea></td></tr>
<tr><td>Option (d)</td><td><textarea name="d" rows="1" cols="50"
placeholder="Option (d)"></textarea></td></tr>
<tr><td>Option (d)</td><td>
137
<select name="ans">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>
</td></tr>
</table>
<input type="submit" value="Add question"><input type="reset"
value="Clear form">
</center>
</form>
</body>
</html>
9) The data collected through the above HTML form is submitted to the
following PHP script (named quest.php):
<?php
require_once('db.php');
$q = $_POST['quest'];
$a = $_POST['a'];
$b = $_POST['b'];
$c = $_POST['c'];
$d = $_POST['d'];
$ans = $_POST['ans'];
$q = "insert into quest (question,a,b,c,d,answer) values
('$q','$a','$b','$c','$d','$ans');";
echo "<center>";
if($db->query($q) == true)
echo "<h1 style='color:green'>Successfully inserted the question with ID
" . $db->insert_id . "</h1>";
else
echo "<h1 style='color:red'>Error in query:<br />$q</h1>";
echo "</center>";
?>
10) To test the script, type the URL http://127.0.0.1/<name>/test/quest.html
in the address bar of browser, fill the questions, options and choose
correct answer. Verify that the records are saved correctly.
Ex. No.: 57-B
Date: 17.04.2018
AIM: To create an online test system
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
138
3) Start MySQL server.
4) Open command prompt (Press Windows+R, type cmd and press Enter).
5) Type cd \xampp\htdocs\<your folder>\test.
6) type notepad testlogin.html in the command line. Type the following
script and save:
<html>
<head>
<title>Login to online test</title>
</head>
<body style="background-color:#FFDDDD;color:red;font-size:150%">
<form name="testFrm" method="POST" action="testlogin.php">
<center>
<h1>Login to online test</h1>
<table>
<tr><td>Name</td><td><input type="text" name="name"></td></tr>
<tr><td>Roll number</td><td><input type="text" name="roll"></td></tr>
</table>
<input type="submit" value="Login"><input type="reset" value="Reset">
</center>
</form>
</body>
</html>
7) Type notepad testlogin.php. Type the following code and save the file:
<?php
require_once('db.php');
$n = $_POST['name'];
$r = $_POST['roll'];
$nq = 0;

$q = "select count(id) as cnt from quest;";


$res = $db->query($q);
if($res->num_rows <= 0) {
echo "<h1>Error: no question available in the quest table</h1>";
return;
}
else {
$row = $res->fetch_array(MYSQLI_BOTH);
$nq = $row[0];
}
session_start();
$_SESSION['name'] = $n;
$_SESSION['roll'] = $r;
$_SESSION['nq'] = $nq;
139
$_SESSION['num'] = 1;
echo "<center><h1 style='color:blue'>Welcome " . $_SESSION['name'] . " to
online test!</h1>";
echo "<a href='test.php?quest=1'>Go to test!</a></center>";
?>
8) Type notepad test.php, type the following code and save the file:
<?php
require_once('db.php');
if(session_status() != PHP_SESSION_ACTIVE)
session_start();
$n = $_SESSION['name'];
$r = $_SESSION['roll'];
$nq = $_SESSION['nq'];

if(isset($_GET['quest']))
$_SESSION['num'] = $_GET['quest'];

$num=$_SESSION['num'];

echo "<body style='background-color:#CCFFDD;font-size:200%;text-


align:justify'>\n";
echo "<form name='quest' method='POST' action='answer.php?quest=" .
($num<$nq-1?$num+1:$nq) . "'>\n";
echo "<p style='color:red;font-size:150%'> " . getValue($db, "question", $num)
. " </p>\n";
echo "<input style='color:blue;font-size:150%' type='radio' name='option'
value='a'>" . getValue($db,"a", $num) . "<br />\n";
echo "<input style='color:blue;font-size:150%' type='radio' name='option'
value='b'> " . getValue($db,"b", $num) . "<br />\n";
echo "<input style='color:blue;font-size:150%' type='radio' name='option'
value='c'> " . getValue($db,"c", $num) . "<br />\n";
echo "<input style='color:blue;font-size:150%' type='radio' name='option'
value='d'> " . getValue($db,"d", $num) . "<br />\n";
echo "<a href='test.php?quest=" . ($num>1?$num-1:1) . "'>Previous</a>\n";
echo "<input type='submit' value='Save'>\n";
echo "<a href='test.php?quest=" . ($num<$nq-1?$num+1:$nq) .
"'>Next</a>\n<br />";
echo "</form>";
echo "<a href='finish.php'><input type='button' value='Finish test'></a>\n";
echo "</body>";

function getValue($db, $col, $n)


{
140
$q = "select $col from quest where id=$n;";
$res = $db->query($q);
if($row = $res->fetch_array(MYSQLI_BOTH))
return $row[0];
return "";
}
?>
9) Type notepad answer.php, enter the following code and save:
<?php
require_once('db.php');

if(session_status() != PHP_SESSION_ACTIVE)
session_start();
$opt = "";
if(isset($_POST['option']))
$opt = $_POST['option'];

$num = $_SESSION['num'];
$nq = $_SESSION['nq'];

if(isset($_GET['quest']))
$_SESSION['num'] = $_GET['quest'];

$_SESSION["a" . $num] = $opt;


$num = $_SESSION['num'];
require_once('test.php');
?>
10) Type notepad finish.php in the command line, enter the following script
and save:
<?php
require_once('db.php');
if(session_status() != PHP_SESSION_ACTIVE)
session_start();

$n = $_SESSION['name'];
$r = $_SESSION['roll'];
$nq = $_SESSION['nq'];

$correct = 0;

$qid = "";
$cans = "";
$ans = "";
141
echo "<h1 style='font-size:200%;text-align:center'>Result for $n (Roll
No.$r)</h1><br />\n";
echo "<h1 style='font-size:200%;text-align:center'>No. of questions:
$nq</h1><br />\n";
echo "<h1 style='font-size:200%;text-align:center'>Answer status:</h1>";
echo "<center><table border=2 style='font-size:150%;text-
align:center'><tr><th>Question ID</th><th>Right answer</th><th>Given
answer</th></tr>\n";

$q = "select id, answer from quest order by id;";


$res = $db->query($q);

while($row = $res->fetch_array(MYSQLI_BOTH)) {
$tmp = "a" . $row[0];
$qid .= $tmp . "-";
$cans .= $row[1] . "-";
echo "<tr><td>$row[0]</td><td>$row[1]</td>";
if(isset($_SESSION[$tmp])) {
echo "<td>" . $_SESSION[$tmp] . "</td></tr>\n";
if($row[1] == $_SESSION[$tmp]) {
$correct++;
$ans .= $_SESSION[$tmp] . "-";
}
}
else {
$ans .= "-";
echo "<td></td></tr>\n";
}
}

$mark = $correct / $nq * 100;


echo "</table></center>\n";
echo "<h1 style='font-size:200%;text-align:center'>No. of correct answers:
$correct</h1><br />\n";
echo "<h1 style='background-color:#CCFFDD;font-size:200%;text-
align:center;color:red'>Mark: $mark</h1><br />\n";
$q = "insert into test (name, roll_number,max_questions,questions,
right_answers, answers_given, number_of_right_answers, mark) values
('$n','$r',$nq,'$qid','$cans','$ans',$correct, $mark);";
if($db->query($q) != true)
echo "<h1>Error in inserting record: $q</h1>";
?>
142
11) Enter the URL http://127.0.0.1/testlogin.html in the address bar of
browser. Fill the name and roll number.
12) Choose answer. Press Save.
13) Use Previous and Next to move among questions.
14) Mark is displayed on clicking the Finish link.
Ex. No.: 57-C
Date: 18.06.2018
AIM: To check whether given number is a prime number
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
4) Open command prompt (Press Windows+R, type cmd and press Enter).
5) Type cd \xampp\htdocs\<your folder>.
6) Type notepad prime.html in the command line. Type the following script
and save:
<html>
<head>
<title>Check for prime</title>
<script type="text/javascript" language="javascript">
function checkPrime()
{
var prime = true;
var x = parseInt(document.primeFrm.x.value);

if(x>3) {
for(var i=3,n=x/2; i<=n && prime; i++)
if(x%i == 0) prime = false;
}
document.getElementById("res").innerHTML = "<h1 style='color:green;text-
align:center'>" +(prime?"Prime":"Not a prime")+ "</h1>";
}
</script>
</head>
<body>
<form name="primeFrm">
<center>
<h1 style="text-align:center;color:red">Prime number</h1>
<table>
<tr><td>Enter number</td><td><input type="text" name="x"></td></tr>
</table>
<input type="button" value="Check prime" onClick="checkPrime()">
<span id="res"> </span>
143
</center>
</form>
</body>
</html>
7) Enter the URL http://127.0.0.1/prime.html in the address bar of browser.
8) Enter a number and press check prime button.
9) The result is displayed either as Prime or as Not a prime.
Ex. No.: 57-D
Date: 18.06.2018
AIM: To find a prime number just above the given non-prime number
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
4) Open command prompt (Press Windows+R, type cmd and press Enter).
5) Type cd \xampp\htdocs\<your folder>.
6) Type notepad nextprime.html in the command line. Type the following
script and save:
<html>
<head>
<title>Next prime</title>
<script type="text/javascript" language="javascript">
function nextPrime()
{
var n = parseInt(document.primeFrm.x.value);
while(!checkPrime(n))
n++;
document.getElementById("res").innerHTML = "<h1 style='color:green;text-
align:center'>" +n+ "</h1>";
}

function checkPrime(x)
{
var prime = true;
if(x>3) {
for(var i=3,n=x/2; i<=n && prime; i++)
if(x%i == 0) prime = false;
}
return prime;
}
</script>
</head>
<body>
144
<form name="primeFrm">
<center>
<h1 style="text-align:center;color:red">Find next prime number</h1>
<table>
<tr><td>Enter number</td><td><input type="text" name="x"></td></tr>
</table>
<input type="button" value="Next prime" onClick="nextPrime()">
<span id="res"> </span>
</center>
</form>
</body>
</html>
7) Enter the URL http://127.0.0.1/nextprime.html in the address bar of
browser.
8) Enter a number and press next prime button.
9) If the input number itself is a prime, the same number is displayed. If not,
the next prime number is displayed.
Ex. No.: 57-E
Date: 18.06.2018
AIM: To display a number in words
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
4) Open command prompt (Press Windows+R, type cmd and press Enter).
5) Type cd \xampp\htdocs\<your folder>.
6) Type notepad readnum.html in the command line. Type the following
script and save:
<html> ten = x%10;
<head> x = (x-ten)/10;
<title>Number in words</title> hundred = x%10;
<script type="text/javascript" x = (x-hundred)/10;
language="javascript"> thousand = x%100;
function numberInWords() x = (x-thousand)/100;
{ lakh = x%100;
var x = crore = (x-lakh)/100;
parseInt(document.primeFrm.x.val words += readDigits(crore, "Crore")
ue); + readDigits(lakh,
var one, ten, hundred, thousand, "Lakh")+readDigits(thousand,
lakh, crore; "Thousand")+
var words = ""; readDigits(hundred,
one = x%10; "Hundred")+readDigits(ten*10+one
x = (x-one)/10; ,"");
145
document.getElementById("res").in else if(x == 17)
nerHTML = "<h1 num = " Seventeen ";
style='color:green;text- else if(x == 18)
align:center'>" +words+ "</h1>"; num = " Eighteen ";
} else if(x == 19)
num = " Nineteen ";
function readDigits(x, des) else if(x == 20)
{ num = " Twenty ";
if(x == 0) else if(x == 30)
return ""; num = " Thirty ";
var num = ""; else if(x == 40)
if(x == 1) num = " Forty ";
num = " One "; else if(x == 50)
else if(x == 2) num = " Fifty ";
num = " Two "; else if(x == 60)
else if(x == 3) num = " Sixty ";
num = " Three "; else if(x == 70)
else if(x == 4) num = " Seventy ";
num = " Four "; else if(x == 80)
else if(x == 5) num = " Eighty ";
num = " Five "; else if(x == 90)
else if(x == 6) num = " Ninety ";
num = " Six "; else if(x<100)
else if(x == 7) num = readDigits((x-x%10),"
num = " Seven "; ")+" "+readDigits(x%10," ");
else if(x == 8) return num+" "+des;
num = " Eight "; }
else if(x == 9)
num = " Nine "; </script>
else if(x == 10) </head>
num = " Ten "; <body>
else if(x == 11) <form name="primeFrm">
num = " Eleven "; <center>
else if(x == 12) <h1 style="text-
num = " Twelve "; align:center;color:red">Number to
else if(x == 13) words</h1>
num = " Thirteen "; <table>
else if(x == 14) <tr><td>Enter
num = " Fourteen "; number</td><td><input
else if(x == 15) type="text" name="x"></td></tr>
num = " Fifteen "; </table>
else if(x == 16)
num = " Sixteen ";
146
<input type="button" value="In </center>
words" </form>
onClick="numberInWords()"> </body>
<span id="res"> </span> </html>

7) Enter the URL http://127.0.0.1/readnum.html in the address bar of


browser.
8) Enter a number and press next prime button.
9) Verify that the given number is correctly displayed in words.
Ex. No.: 58
Date: 17.04.2018
AIM: To create website using WordPress CMS (Content Management System)
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
4) Press Admin button of MySQL. The webpage shown in figure opens:

5) If you wish to create a new database for CMS (Content Management


System), create new database (say <name>cms), by clicking the New link
in the left side panel.
6) Click on the newly created database.
7) Choose Privileges tab. Press New user link to create new user.
8) Enter user name (<name>cms). Choose localhost for login. Enter and
reenter password. Memorize the user name and password (or keep it
safely written).
9) Extract the zip file containing WordPress. Copy the contents to your web
directory (c:\xampp\htdocs\<yourname>).
10) Navigate the the folder c:\xampp\htdocs\<yourname>\wordpress\. Open
the wp-config-sample.php. Enter the database name, user name and
password in the appropriate fields. Choose File->Save As, enter the name
wp-config.php, set file type to All files and press Save button.

147
11) Open the URL http://127.0.0.1/<yourname>/wordpress/wp-
admin/install.php.
12) Welcome screen appears. Enter user name, password and email ID. On
clicking Submit button, the new configuration is applied.
13) Login screen appears. Enter your wordpress user name and password to
login (http://127.0.0.1/<name>/wordpress/wp-login.php).
14) You may customize the website by pressing the pencil icon to edit images
and text.
15) After completing the editing process, press Publish button to get the
changes published.
16) Type the URL http://127.0.0.1/<yourname>/wordpress/index.php to
view the website created by you.

Ex. No.: 59
Date: 18.04.2018
AIM: To create website using Joomla CMS (Content Management System)
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
4) Press Admin button of MySQL. The webpage shown in figure opens:
5) If you wish to create a new database for CMS (Content Management
System), create new database (say <name>cms), by clicking the New link
in the left side panel.
6) Click on the newly created database.
7) Choose Privileges tab. Press New user link to create new user.
8) Enter user name (<name>cms). Choose localhost for login. Enter and
reenter password. Memorize the user name and password (or keep it
safely written).
9) Extract the zip file containing Joomla. Copy the contents to your web
directory (c:\xampp\htdocs\<yourname>).
10) Open the URL http://127.0.0.1/vn/joomla/installation/index.php.

148
11) Configuration screen appears. Enter name of website, description, email
ID, user name, password.
12) On clicking Next button, the details of MySQL database name, user name
and password are requested.

13) Fill the details and press Next button.


14) Choose the type of website (say Default English (GB)). Press Install button
and wait till the installation is completed.
15) The message showing successful installation appears. Press Remove
installation folder button.
16) Click Site button. When the site loads, login using user ID and password.
17) All links become editable as the mouse pointer moves over them.
18) Edit the contents to suit your taste.
19) Type the URL http://127.0.0.1/name/joomla/ to view the website
created by you.

Ex. No.: 60
Date: 25.04.2018
AIM: To create website using Drupal CMS (Content Management System)
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Start MySQL server.
4) Press Admin button of MySQL. The webpage shown in figure opens:
5) If you wish to create a new database for CMS (Content Management
System), create new database (say <name>cms), by clicking the New link
in the left side panel.
6) Click on the newly created database.
7) Choose Privileges tab. Press New user link to create new user.
8) Enter user name (<name>cms). Choose localhost for login. Enter and
reenter password. Memorize the user name and password (or keep it
safely written).
149
9) Extract the zip file containing Joomla. Copy the contents to your web
directory (c:\xampp\htdocs\<yourname>).
10) Open the URL http://127.0.0.1/<name>/Drupal/ index.php.
11) Configuration screen appears. Choose English language, press Save and
continue.
12) Database configuration screen appears. Press Advanced settings. Enter
database name, user name, password. Enter <name>drupal_ against the
table prefix.

13) Choose India for country, Kolkata for time zone.


14) Allow Drupal to complete installation of the website.
15) Website configuration screen appears. Create a default page for your
website from available choices of page design.
16) Create new page save and close the details and preview the page for
possible corrections.
Ex. No.: 61
Date: 27.04.2018
AIM: To convert temperature from Fahrenheit to Celsius
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Open command prompt. Type cd \xampp\htdocs\<your name>.
4) Type notepad f2c.html in the command prompt and type the following
script and save the file:
<html>
<head>
<title>Temperature conversion: Fahrenheit to Celsius</title>
<script type="text/javascript" language="javascript">
function f2c()
150
{
var f = Number(f2cFrm.x.value);
var c = (f-32)*5/9;
var str = "<h1 style='color:green'>"+f+"<sup>o</sup>F = "+
c+"<sup>o</sup>C</h1>";
document.getElementById("res").innerHTML=str;
}
</script>
</head>

<body style='background:#AACCFF;color:red;text-align:center'>
<h1>Convert temperature from Fahrenheit to Celsius</h1>
<form name="f2cFrm" action="#" method="POST">
<center>
<table>
<tr><td>Enter temperature in Fahrenheit</td><td><input type="text"
name="x"></td></tr>
</table>
<input type="button" value="Convert" onClick="f2c()">
<span id="res"></span>
</center>
</form>

</body>
</html>
5) Type http://127.0.0.1/<yourname>/f2c.html in the address bar of
browser. Enter sample Fahrenheit values (32, -40, 42) and verify whether
the resulting Celsius values are correctly displayed (0, -40, 18).

Ex. No.: 62
Date: 27.04.2018
AIM: To convert temperature from Celsius to Fahrenheit
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Open command prompt. Type cd \xampp\htdocs\<your name>.
4) Type notepad c2f.html in the command prompt and type the following
script and save the file:
<html>
<head>
<title>Temperature conversion: Celsius to Fahrenheit </title>
<script type="text/javascript" language="javascript">
function c2f()
151
{
var c = Number(f2cFrm.x.value);
var f = 9/5*c+32;
var str = "<h1 style='color:green'>"+c+"<sup>o</sup>C = "+
f+"<sup>o</sup>F</h1>";
document.getElementById("res").innerHTML=str;
}
</script>
</head>

<body style='background:#AACCFF;color:red;text-align:center'>
<h1>Convert temperature from Celsius to Fahrenheit</h1>
<form name="f2cFrm" action="#" method="POST">
<center>
<table>
<tr><td>Enter temperature in Celsisus</td><td><input type="text"
name="x"></td></tr>
</table>
<input type="button" value="Convert" onClick="c2f()">
<span id="res"></span>
</center>
</form>

</body>
</html>
5) Type http://127.0.0.1/<yourname>/c2f.html in the address bar of
browser. Enter sample Fahrenheit values (0, -40, 40) and verify whether
the resulting Celsius values are correctly displayed (32, -40, 86).

Ex. No.: 63
Date: 27.04.2018
AIM: To convert temperature from Celsius to Fahrenheit and vice-versa
PROCEDURE:
1) Start XAMPP control panel.
2) Start Apache server.
3) Open command prompt. Type cd \xampp\htdocs\<your name>.
4) Type notepad temp.html in the command prompt and type the following
script and save the file:

<html>
<head>
<title>Temperature conversion</title>
<script type="text/javascript" language="javascript">
152
function convert()
{
var opt = tempFrm.opt.value;
var str = "";
if(opt == "f2c") {
var f = Number(tempFrm.x.value);
var c = (f-32)*5/9;
str = "<h1 style='color:green'>"+f+"<sup>o</sup>F = "+
c+"<sup>o</sup>C</h1>";
}
else {
var c = Number(tempFrm.x.value);
var f = 9/5*c+32;
str = "<h1 style='color:green'>"+c+"<sup>o</sup>C = "+
f+"<sup>o</sup>F</h1>";
}
document.getElementById("res").innerHTML=str;
}
</script>
</head>

<body style='background:#AACCFF;color:red;text-align:center'>
<h1>Convert temperature from Fahrenheit to Celsius</h1>
<form name="tempFrm" action="#" method="POST">
<center>
<table>
<tr><td>Enter temperature in Fahrenheit</td><td><input type="text"
name="x"></td></tr>
<tr><td>Choose conversion</td>
<td>
<select name="opt">
<option value="f2c">Fahrenheit to Celsius</option>
<option value="c2f">Celsius to Fahrenheit</option>
</select>
</td></tr>
</table>

<input type="button" value="Convert" onClick="convert()">

<span id="res"></span>
</center>
</form>

153
</body>
</html>

5) Type http://127.0.0.1/<yourname>/temp.html in the address bar of


browser. Enter sample Fahrenheit values (0, -40, 40) and verify whether
the resulting Celsius values are correctly displayed (32, -40, 86) and try
the results vice-versa.
Ex. No.: 64
Date: 02.05.2018
AIM: To convert temperature from Fahrenheit to Celsius using VBA
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter againts TextAlign, Fahrenheit to Celsius against
Caption, Tahoma, Bold, 16 pt against Font, Highlight against ForeColor.
7) Insert another label below the caption (left part of form), set the caption
to Fahrenheit. Set Tahoma, Bold, 14pt against Font, Highlight against
ForeColor and 1 – fmTextAlignLeft against TextAlign.
8) Insert a TextBox to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert a CommandButton below the Label and InputBox, Edit its caption
to Convert, Font to Tahoma, Bold, 14 pt.
10) Copy the caption Label, paste it in the form and drag it to the bottom of
the form. Make the caption property blank.
11) Note that the 3 labels have Name property (seen in Properties window)
of Label1, Label2 and Label3, the CommandButton has name of
CommandButton1 and TextBox has name of TextBox1.
12) Double click CommandButton1, enter the following code and press Save:
Private Sub CommandButton1_Click()
Dim f, c As Double 'f - Fahrenheit, c - Celsius
154
f = CDbl(TextBox1.Text) 'Value entered in TextBox1 is converted from String
type to Double type
c = (f - 32) * 5 / 9 'Conversion of Fahrenheit to Celsius
Label3.Caption = c 'Display the result in Label3
End Sub
13) Save the project (Ctrl+S), enter <name>f2c against File name, Excel
Macro-Enable Workbook (*.xlsm) against File type.
14) Choose Run->Run Sub/UserFrm (or press F5). Enter test value (59, 77, …)
and verify that the result is correct (15, 25, …).
15) Press Windows+Prt Sc button to save screen shot in Pictures folder.
16) Open the Screen shot using MS Paint, select the form and press crop
button.
17) Open the screenshot in Windows Photos and print on A4 sheet.
Ex. No.: 65
Date: 02.05.2018
AIM: To convert temperature from Fahrenheit to Celsius using VBA
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter againts TextAlign, Celsius to Fahrenheit against
Caption, Tahoma, Bold, 16 pt against Font, Highlight against ForeColor.
7) Insert another label below the caption (left part of form), set the caption
to Celsisu. Set Tahoma, Bold, 14pt against Font, Highlight against
ForeColor and 1 – fmTextAlignLeft against TextAlign.
8) Insert a TextBox to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert a CommandButton below the Label and InputBox, Edit its caption
to Convert, Font to Tahoma, Bold, 14 pt.
10) Copy the caption Label, paste it in the form and drag it to the bottom of
the form. Make the caption property blank.
155
11) Note that the 3 labels have Name property (seen in Properties window)
of Label1, Label2 and Label3, the CommandButton has name of
CommandButton1 and TextBox has name of TextBox1.
12) Double click CommandButton1, enter the following code and press Save:
Private Sub CommandButton1_Click()
Dim f, c As Double 'f - Fahrenheit, c - Celsius
c = CDbl(TextBox1.Text) 'Value entered in TextBox1 is converted from String
type to Double type
f = 9 / 5 * c + 32 'Conversion of Fahrenheit to Celsius
Label3.Caption = f 'Display the result in Label3
End Sub
13) Save the project (Ctrl+S), enter <name>c2f against File name, Excel
Macro-Enable Workbook (*.xlsm) against File type.
14) Choose Run->Run Sub/UserFrm (or press F5). Enter test value (45, 25, …)
and verify that the result is correct (113, 77, …).
15) Press Windows+Prt Sc button to save screen shot in Pictures folder.
16) Open the Screen shot using MS Paint, select the form and press crop
button.
17) Open the screenshot in Windows Photos and print on A4 sheet.
Ex. No.: 66
Date: 03.05.2018
AIM: To convert temperature from Fahrenheit to Celsius and vice versa using
VBA
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter againts TextAlign, Temperature Conversion against
Caption, Tahoma, Bold, 16 pt against Font, Highlight against ForeColor.
7) Insert another label below the caption (left part of form), set the caption
to Temperature. Set Tahoma, Bold, 14pt against Font, Highlight against
ForeColor and 1 – fmTextAlignLeft against TextAlign.
156
8) Insert a TextBox to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert a ComboBox object. Enter Fahrenheight to Celsius against Value,
set Tahoma-Bold-14pt against Font, set Highlight against ForeColor.
10) To populate ComboBox1, select View->Code (F7), select UserForm against
object and Activate against action. A subroutine called Private Sub
UserForm_Activate() appears. Enter the following code:
Private Sub UserForm_Activate()
With ComboBox1
.AddItem "Fahrenheit to Celsius"
.AddItem "Celsius to Fahrenheit"
End With
End Sub
11) The with ComboBox1 …. End With block adds items to ComboBox1.
Change the Font property to Tahoma, Bold, 14pt, ForeColor property to
Highlight.
12) Insert a CommandButton below ComboBox1, Edit its caption to Convert,
Font to Tahoma, Bold, 14 pt.
13) Double click CommandButton1, enter the following code:

Private Sub CommandButton1_Click()


Dim opt As String
opt = ComboBox1.Value
If opt = "Fahrenheit to Celsius" Then
f2c
Else
c2f
End If
End Sub

Private Sub f2c()


Dim f, c As Double 'f - Fahrenheit, c - Celsius
f = CDbl(TextBox1.Text) 'Value entered in TextBox1 is converted from String
type to Double type
c = (f - 32) * 5 / 9 'Conversion of Fahrenheit to Celsius
Label3.Caption = c 'Display Celsius value in Label3
End Sub

Private Sub c2f()


Dim f, c As Double 'f - Fahrenheit, c - Celsius
c = CDbl(TextBox1.Text) 'Value entered in TextBox1 is converted from String
type to Double type
157
f = 9 / 5 * c + 32 'Conversion of Celsius to Fahrenheit
Label3.Caption = f 'Display Fahrenheit value in Label3
End Sub

14) Copy the caption Label, paste it in the form and drag it to the bottom of
the form. Make the caption property blank.
15) Note that the 3 labels have Name property (seen in Properties window)
of Label1, Label2 and Label3, the CommandButton has name of
CommandButton1 and TextBox has name of TextBox1.
16) Save the project (Ctrl+S), enter <name>temp against File name, Excel
Macro-Enable Workbook (*.xlsm) against File type.
17) Choose Run->Run Sub/UserFrm (or press F5). Enter test value and verify
the result.
18) Press Windows+Prt Sc button to save screen shot in Pictures folder.
19) Open the Screen shot using MS Paint, select the form and press crop
button.
20) Open the screenshot in Windows Photos and print on A4 sheet.
Ex. No.: 67
Date: 04.05.2018
AIM: To add 2 Long (Long type) using VBA Form
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter againts TextAlign, Addition of numbers against
Caption, Tahoma, Bold, 16 pt against Font, Highlight against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to Enter
x. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor and 1
– fmTextAlignLeft against TextAlign.
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
158
9) Insert Label3 below the caption (left part of form), set the caption to Enter
y. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor and 1
– fmTextAlignLeft against TextAlign.
10) Insert TextBox2 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
11) Insert CommandButton1 below ComboBox1, Edit its caption to Add, Font
to Tahoma, Bold, 14 pt.
12) Copy Label1. Paste it to get Label4. Delete Caption value for Label4 to
make it blank.
13) Double click CommandButton1, enter the following code:
Option Explicit
Private Sub CommandButton1_Click()
Dim x, y, z As Long
x = CLng(TextBox1.Text)
y = CLng(TextBox2.Text)
z=x+y
Label4.Caption = x & " + " & y & " = " & z
End Sub
14) The line Option Explicit states that each variable should be defined using
DIM statement before using the variable.
15) The statement Dim x, y, z As Long declares variables named x, y and z of
type Long.
16) The statement x = CLng(TextBox1.Text) converts the text value from
TextBox1 to Long data type. Similarly, y = CLng(TextBox2.Text) converts
the text value entered in TextBox2 to Long type.
17) Addition of given numbers is carried out using the statement z = x + y. The
result is displayed in Label4 using Caption property. In VBA, & operator
does string concatenation.
Ex. No.: 68
Date: 04.05.2018
AIM: To substract 2 (Intger type) using VBA Form
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.

159
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter againts TextAlign, Subtraction of numbers against
Caption, Tahoma, Bold, 16 pt against Font, Highlight against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to Enter
x. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor and 1
– fmTextAlignLeft against TextAlign.
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert Label3 below Label2, set the caption to Enter y. Set Tahoma, Bold,
14pt against Font, Highlight against ForeColor and 1 – fmTextAlignLeft
against TextAlign.
10) Insert TextBox2 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
11) Insert CommandButton1 below ComboBox1, Edit its caption to Subtract,
Font to Tahoma, Bold, 14 pt.
12) Copy Label1. Paste it to get Label4. Delete Caption value for Label4 to
make it blank.
13) Double click CommandButton1, enter the following code:
Option Explicit
Private Sub CommandButton1_Click()
Dim x, y, z As Integer
x = CInt(TextBox1.Text)
y = CInt(TextBox2.Text)
z=x-y
Label4.Caption = x & " - " & y & " = " & z
End Sub
14) The line Option Explicit states that each variable should be defined using
DIM statement before using the variable.
15) The statement Dim x, y, z As Integer declares variables named x, y and z
of type Integer.
16) The statement x = CInt(TextBox1.Text) converts the text value from
TextBox1 to Long data type. Similarly, y = CInt(TextBox2.Text) converts
the text value entered in TextBox2 to Integer type.
17) Subtraction of given numbers is carried out using the statement z = x - y.
The result is displayed in Label4 using Caption property. In VBA, &
operator does string concatenation.
Ex. No.: 69
160
Date: 04.05.2018
AIM: To Multiply 2 (Double type) numbers using VBA Form
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter againts TextAlign, Multiply numbers against Caption,
Tahoma, Bold, 16 pt against Font, Highlight against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to Enter
x. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor and 1
– fmTextAlignLeft against TextAlign.
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert Label3 below Label2, set the caption to Enter y. Set Tahoma, Bold,
14pt against Font, Highlight against ForeColor and 1 – fmTextAlignLeft
against TextAlign.
10) Insert TextBox2 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
11) Insert CommandButton1 below ComboBox1, Edit its caption to Multiply,
Font to Tahoma, Bold, 14 pt.
12) Copy Label1. Paste it to get Label4. Delete Caption value for Label4 to
make it blank.
13) Double click CommandButton1, enter the following code:
Option Explicit
Private Sub CommandButton1_Click()
Dim x, y, z As Double
x = CDbl(TextBox1.Text)
y = CDbl(TextBox2.Text)
z=x*y
Label4.Caption = x & " * " & y & " = " & z
161
End Sub
14) The line Option Explicit states that each variable should be defined using
DIM statement before using the variable.
15) The statement Dim x, y, z As Integer declares variables named x, y and z
of type Double.
16) The statement x = CDbl(TextBox1.Text) converts the text value from
TextBox1 to Long data type. Similarly, y = CDbl(TextBox2.Text) converts
the text value entered in TextBox2 to Long type.
17) Multiplication of given numbers is carried out using the statement z = x *
y. The result is displayed in Label4 using Caption property. In VBA, &
operator does string concatenation.
Ex. No.: 70
Date: 04.05.2018
AIM: To Divide (Decimal type) numbers using VBA Form
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter againts TextAlign, Divide numbers against Caption,
Tahoma, Bold, 16 pt against Font, Highlight against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to Enter
x. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor and 1
– fmTextAlignLeft against TextAlign.
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert Label3 below Label2, set the caption to Enter y. Set Tahoma, Bold,
14pt against Font, Highlight against ForeColor and 1 – fmTextAlignLeft
against TextAlign.
10) Insert TextBox2 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
162
11) Insert CommandButton1 below ComboBox1, Edit its caption to Multiply,
Font to Tahoma, Bold, 14 pt.
12) Copy Label1. Paste it to get Label4. Delete Caption value for Label4 to
make it blank.
13) Double click CommandButton1, enter the following code:
Option Explicit
Private Sub CommandButton1_Click()
Dim x, y, z As Double
x = CDec(TextBox1.Text)
y = CDec(TextBox2.Text)
z=x/y
Label4.Caption = x & " / " & y & " = " & z
End Sub
14) The line Option Explicit states that each variable should be defined using
DIM statement before using the variable.
15) The statement Dim x, y, z As Integer declares variables named x, y and z
of type Double (which will be used to assign values of Decimal type later
in the program).
16) The statement x = CDec(TextBox1.Text) converts the text value from
TextBox1 to Decimal data type. Similarly, y = CDec(TextBox2.Text)
converts the text value entered in TextBox2 to Decimal type. Variable
cannot be declared with Decimal type.
17) Division of given numbers is carried out using the statement z = x / y. The
result is displayed in Label4 using Caption property. In VBA, & operator
does string concatenation.
Ex. No.: 71
Date: 07.05.2018
AIM: To calculate sum of first N integers using VBA
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.

163
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter against TextAlign, Sum of integers against Caption,
Tahoma, Bold, 16 pt against Font, Highlight against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to Enter
N. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor and 1
– fmTextAlignLeft against TextAlign.
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert CommandButton1 below ComboBox1, Edit its caption to Sum, Font
to Tahoma, Bold, 14 pt.
10) Copy Label1. Paste it to get Label4. Delete Caption value for Label3 to
make it blank.
11) Double click CommandButton1, enter the following code:
Option Explicit
Private Sub CommandButton1_Click()
Dim n, i, sum As Integer
n = CInt(TextBox1.Text)
sum = 0
For i = 1 To n Step 1
sum = sum + i
Next i
Label3.Caption = "1 + ... + " & n & " = " & sum
End Sub
12) The line Option Explicit states that each variable should be defined using
DIM statement before using the variable.
13) The statement Dim n, I, sum As Integer declares variables named n, i and
sum of type Integer.
14) The statement n = CInt(TextBox1.Text) converts the text value from
TextBox1 to integer data type. Set sum = 0 initializes variable sum to zero.
15) For loop is declared in the line For i = 1 To n Step 1. The loop runs till Next
i is encountered. Inside the for loop, the expression sum = sum + i
calculates the sum of integers till given numbe n is reached.
16) The result is displayed in Label3, using the line Label3.Caption = "1 + ... +
" & n & " = " & sum.

Ex. No.: 72
Date: 07.05.2018
AIM: To calculate factorial of given number
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.

164
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter against TextAlign, Factorial of given number against
Caption, Tahoma, Bold, 16 pt against Font, Highlight against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to Enter
N. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor and 1
– fmTextAlignLeft against TextAlign.
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert CommandButton1 below ComboBox1, Edit its caption to Factorial,
Font to Tahoma, Bold, 14 pt.
10) Copy Label1. Paste it to get Label4. Delete Caption value for Label3 to
make it blank.
11) Double click CommandButton1, enter the following code:
Option Explicit
Private Sub CommandButton1_Click()
Dim n, i, fact As Long
n = CLng(TextBox1.Text)
fact = 1
For i = 1 To n Step 1
fact = fact * i
Next i
Label3.Caption = n & "! = " & fact
End Sub
12) The line Option Explicit states that each variable should be defined using
DIM statement before using the variable.
13) The statement Dim n, I, fact As Long declares variables named n, i and
sum of type Long.
14) The statement n = CLng(TextBox1.Text) converts the text value from
TextBox1 to integer data type. Set fact = 1 initializes variable fact to 1.

165
15) For loop is declared in the line For i = 1 To n Step 1. The loop runs till Next
i is encountered. Inside the for loop, the expression fact = fact * i
calculates the factorial.
16) The result is displayed in Label3, using the line Label3.Caption = n & "! =
" & fact

Ex. No.: 73
Date: 08.05.2018
AIM: To calculate sum of squares of first N integers using VBA
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter against TextAlign, Sum of squares against Caption,
Tahoma, Bold, 16 pt against Font, Highlight against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to Enter
N. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor and 1
– fmTextAlignLeft against TextAlign.
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert CommandButton1 below ComboBox1, Edit its caption to Sum of
squares, Font to Tahoma, Bold, 14 pt.
10) Copy Label1. Paste it to get Label4. Delete Caption value for Label3 to
make it blank.
11) Double click CommandButton1, enter the following code:
Option Explicit
Private Sub CommandButton1_Click()
Dim n, i, sum As Integer
n = CInt(TextBox1.Text)
sum = 0
166
For i = 1 To n Step 1
sum = sum + i ^ 2
Next i
Label3.Caption = "1^2 + ... + " & n & "^2 = " & sum
End Sub
12) The line Option Explicit states that each variable should be defined using
DIM statement before using the variable.
13) The statement Dim n, I, sum As Long declares variables named n, i and
sum of type Double (which will be used to assign values of Decimal type
later in the program).
14) The statement n = CLng(TextBox1.Text) converts the text value from
TextBox1 to integer data type. Set sum = 0 initializes variable sum to zero.
15) For loop is declared in the line For i = 1 To n Step 1. The loop runs till Next
i is encountered. Inside the for loop, the expression sum = sum + i ^ 2
calculates the sum of squares of integers till given number n is reached.
16) The result is displayed in Label3, using the line Label3.Caption = "1^2 + ...
+ " & n & "^2 = " & sum.

Ex. No.: 74
Date: 08.05.2018
AIM: To calculate sum of cubes of first N integers using VBA
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter against TextAlign, Sum of squares against Caption,
Tahoma, Bold, 16 pt against Font, Highlight against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to Enter
N. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor and 1
– fmTextAlignLeft against TextAlign.

167
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert CommandButton1 below ComboBox1, Edit its caption to Sum of
squares, Font to Tahoma, Bold, 14 pt.
10) Copy Label1. Paste it to get Label4. Delete Caption value for Label3 to
make it blank.
11) Double click CommandButton1, enter the following code:
Option Explicit
Private Sub CommandButton1_Click()
Dim n, i, sum As Integer
n = CInt(TextBox1.Text)
sum = 0
For i = 1 To n Step 1
sum = sum + i ^ 3
Next i
Label3.Caption = "1^3 + ... + " & n & "^3 = " & sum
End Sub
12) The line Option Explicit states that each variable should be defined using
DIM statement before using the variable.
13) The statement Dim n, I, sum As Long declares variables named n, i and
sum of type Double (which will be used to assign values of Decimal type
later in the program).
14) The statement n = CLng(TextBox1.Text) converts the text value from
TextBox1 to integer data type. Set sum = 0 initializes variable sum to zero.
15) For loop is declared in the line For i = 1 To n Step 1. The loop runs till Next
i is encountered. Inside the for loop, the expression sum = sum + i ^ 3
calculates the sum of cubes of integers till given number n is reached.
16) The result is displayed in Label3, using the line Label3.Caption = "1^3 + ...
+ " & n & "^3 = " & sum.

Ex. No.: 75
Date: 08.05.2018
AIM: To calculate sum of numbers, factorial, sum of squares and sum of cubes
using VBA
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
168
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter against TextAlign, Series results against Caption,
Tahoma, Bold, 16 pt against Font, Dark red against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to Enter
N. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor and 1
– fmTextAlignLeft against TextAlign.
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert OptionButton1. Set Highlight against foreColour, Sum against
Caption, Tahoma, Bold, 14pt against Font.
10) Copy OptionButton1 and paste it to create OptionButton2. Set Factorial
against Caption.
11) Copy OptionButton1 and paste it to create OptionButton3. Set Sum of
squares against Caption.
12) Copy OptionButton1 and paste it to create OptionButton4. Set Sum of
cubes against Caption.
13) Insert CommandButton1 below ComboBox1, Edit its caption to Calculate,
Font to Tahoma, Bold, 14 pt.
14) Copy Label1. Paste it to get Label3. Delete Caption value for Label3 to
make it blank.
15) Double click CommandButton1, enter the following code:
Option Explicit

Private Sub CommandButton1_Click()


Dim n, res As Long
n = CLng(TextBox1.Text)
If OptionButton1.Value = True Then
res = sum(n)
ElseIf OptionButton2.Value = True Then
res = fact(n)
ElseIf OptionButton3.Value = True Then
res = sumsq(n)
ElseIf OptionButton4.Value = True Then
res = sumcb(n)
End If
Label3.Caption = res
169
End Sub

Function sum(n) As Long


sum = 0
Dim i As Long
For i = 1 To n Step 1
sum = sum + i
Next i
End Function

Function fact(n) As Long


fact = 1
Dim i As Long
For i = 1 To n Step 1
fact = fact * i
Next i
End Function

Function sumsq(n) As Long


sumsq = 0
Dim i As Long
For i = 1 To n Step 1
sumsq = sumsq + i ^ 2
Next i
End Function

Function sumcb(n) As Long


sumcb = 0
Dim i As Long
For i = 1 To n Step 1
sumcb = sumcb + i ^ 3
Next i
End Function
16) The value chosen through OptionButton1 to OptionButton4 is verified
through IF condition. Based on the selected OptionButton, sum function
is called for OptionButton1, fact function is called for OptionButton2,
sumsq function is called for OptionButton3, sumcb function is called for
OptionButton4.
17) All results are stored in the variable res and displayed using the line
Label3.Caption = res.

Ex. No.: 76
Date: 08.05.2018
170
AIM: To display Fibonacci series using VBA
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter against TextAlign, Fibonacci series against Caption,
Tahoma, Bold, 16 pt against Font, Dark red against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to
Terms. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor
and 1 – fmTextAlignLeft against TextAlign.
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert CommandButton1. Set caption to Calculate, Font to Tahoma, Bold,
14pt, ForeColor to Red.
10) Insert TextBox2. Set Font to Tahoma, Bold, 14pt, ForeColor to blue,
Multiline to true, TextAlign to 2 – fmTextAlignCentre, ScrollBar to 3-
fmScrollBarsBoth.
11) Double click CommandButton1, enter the following code:
Option Explicit

Private Sub CommandButton1_Click()


Dim n, i, x, y, z As Long
Dim res As String
n = CLng(TextBox1.Text)
i=2
x=1
y=1
res = x & vbCrLf
res = res & y & vbCrLf

While i < n
171
z=x+y
x=y
y=z
i=i+1
res = res & y & vbCrLf
Wend
TextBox2.Text = res
End Sub
12) The constant vbCrLf is used to insert a newline (Carriage return & Line
feed) at the end of each term.
13) While loop is used to calculate the successive terms. Each new term is
calculated as the result of summation of previous 2 terms. The results are
appended to res variable.
14) All results are stored in the variable res and displayed using the line
Label3.Caption = res.
Ex. No.: 77
Date: 09.05.2018
AIM: To display multiplication table using VBA
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter against TextAlign, Multiplication tables against
Caption, Tahoma, Bold, 16 pt against Font, Dark red against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to Enter
x. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor and 1
– fmTextAlignLeft against TextAlign.
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert CheckBox1. Set its Caption to TextBox, Font to Tahoma, Bold, 14pt,
ForeColor to Blue.
172
10) Copy CheckBox1 and paste it to get CheckBox2. Set its Caption to Sheet1.
11) Insert CommandButton1. Set caption to Display, Font to Tahoma, Bold,
14pt, ForeColor to Blue.
12) Insert TextBox2. Set Font to Tahoma, Bold, 14pt, ForeColor to blue,
Multiline to true, TextAlign to 2 – fmTextAlignCentre, ScrollBar to 3-
fmScrollBarsBoth.
13) Double click CommandButton1, enter the following code:
Option Explicit

Private Sub CommandButton1_Click()


Dim x, i As Integer
x = CInt(TextBox1.Text)
i=1
TextBox2.Text = ""
Do Until i > 10
If CheckBox1.Value = True Then
TextBox2.Text = TextBox2.Text & i
TextBox2.Text = TextBox2.Text & " x "
TextBox2.Text = TextBox2.Text & x
TextBox2.Text = TextBox2.Text & " = "
TextBox2.Text = TextBox2.Text & (i * x)
TextBox2.Text = TextBox2.Text & vbCrLf
ElseIf CheckBox2.Value = True Then
Sheet1.Cells(i, 1) = i
Sheet1.Cells(i, 2) = "x"
Sheet1.Cells(i, 3) = x
Sheet1.Cells(i, 4) = "="
Sheet1.Cells(i, 5) = (i * x)
End If
i=i+1
Loop
End Sub
14) The constant vbCrLf is used to insert a newline (Carriage return & Line
feed) at the end of each term.
15) Do Until loop is executed till the condition i>10 is false.
16) The first If condition inside the Do While loop verifies whether CheckBox1
was selected. Then, it sets values to TextBox2.
17) The second If condition verifies whether CheckBox2 was selected. Then,
it sets values to Sheet1, using Cells (row, column) .value property.
18) The value of i is increment by 1 using the statement i = i + 1.
19) The Do While ends at the Loop statement.

173
Ex. No.: 78
Date: 11.05.2018
AIM: To Convert a number from binary to decimal
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter against TextAlign, Binary to Decimal against Caption,
Tahoma, Bold, 16 pt against Font, Dark red against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to
Binary. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor
and 1 – fmTextAlignLeft against TextAlign.
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert CommandButton1. Set Tahoma, Bold, 14pt against Font, Convert
against Caption, Hightlight against ForeColor.
10) Copy Label2, paste it and drag it below CommandButton1 to create
Label3. Change Caption to Decimal.
11) Copy Label3, paste it and drag it to the right of Label3 to get Label4. Make
Caption blank for the label.
12) Double click CommandButton1, enter the following code:

Option Explicit
Private Sub CommandButton1_Click()
Dim res, num, frac
Dim base, remainder, i As Integer
Dim n
n = Split(TextBox1.Text & ".0", ".")
base = 2
num = n(0)
frac = n(1)
174
res = 0

i=0
While num <> ""
remainder = Right(num, 1)
res = res + remainder * (base ^ i)
num = Left(num, Len(num) - 1)
i=i+1
Wend

i=1
While frac <> ""
remainder = Left(frac, 1)
res = res + remainder / (base ^ i)
frac = Right(frac, Len(frac) - 1)
i=i+1
Wend

Label4.Caption = res
End Sub
13) The binary number entered in TextBox1 is split into integer (variable num)
and fraction (variable frac) parts.
14) The right most digit of the integer part is extracted in remainder,
multiplied by base (2) power digit count (i) and added to res. The right
most digit is removed from the num part using Left function and providing
length of string minus 1 against new length.
15) The left most digit of the fraction part is extracted in remainder, divided
by base (2) power digit count (i) and added to res. The left most digit is
removed from the frac part using right function and providing length of
string minus 1 against new length.
16) The result of binary to decimal conversion is displayed through
Label4.Caption property.

Ex. No.: 79
Date: 11.05.2018
AIM: To Convert a number from octa-decimal to decimal
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.

175
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter against TextAlign, Octal to Decimal against Caption,
Tahoma, Bold, 16 pt against Font, Dark red against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to
Octal. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor
and 1 – fmTextAlignLeft against TextAlign.
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert CommandButton1. Set Tahoma, Bold, 14pt against Font, Convert
against Caption, Hightlight against ForeColor.
10) Copy Label2, paste it and drag it below CommandButton1 to create
Label3. Change Caption to Decimal.
11) Copy Label3, paste it and drag it to the right of Label3 to get Label4. Make
Caption blank for the label.
12) Double click CommandButton1, enter the following code:
Option Explicit
Private Sub CommandButton1_Click()
Dim res, num, frac
Dim base, remainder, i As Integer
Dim n
n = Split(TextBox1.Text & ".0", ".")
base = 8
num = n(0)
frac = n(1)
res = 0

i=0
While num <> ""
remainder = Right(num, 1)
res = res + remainder * (base ^ i)
num = Left(num, Len(num) - 1)
i=i+1
Wend
176
i=1
While frac <> ""
remainder = Left(frac, 1)
res = res + remainder / (base ^ i)
frac = Right(frac, Len(frac) - 1)
i=i+1
Wend

Label4.Caption = res
End Sub
13) The octal number entered in TextBox1 is split into integer (variable num)
and fraction (variable frac) parts.
14) The right most digit of the integer part is extracted in remainder,
multiplied by base (8) power digit count (i) and added to res. The right
most digit is removed from the num part using Left function and providing
length of string minus 1 against new length.
15) The left most digit of the fraction part is extracted in remainder, divided
by base (8) power digit count (i) and added to res. The left most digit is
removed from the frac part using right function and providing length of
string minus 1 against new length.
16) The result of octal to decimal conversion is displayed through
Label4.Caption property.

Ex. No.: 80
Date: 12.05.2018
AIM: To Convert a number from hexadecimal to decimal
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.

177
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter against TextAlign, Hexal to Decimal against Caption,
Tahoma, Bold, 16 pt against Font, Dark red against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to
Hexal. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor
and 1 – fmTextAlignLeft against TextAlign.
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert CommandButton1. Set Tahoma, Bold, 14pt against Font, Convert
against Caption, Hightlight against ForeColor.
10) Copy Label2, paste it and drag it below CommandButton1 to create
Label3. Change Caption to Decimal.
11) Copy Label3, paste it and drag it to the right of Label3 to get Label4. Make
Caption blank for the label.
12) Double click CommandButton1, enter the following code:
Option Explicit
Private Sub CommandButton1_Click()
Dim res, num, frac
Dim base, remainder, i As Integer
Dim val, n
val = Array("0", "1", "2", "3", "4", "5", "16", "7", "8", "9", "A", "B", "C", "D",
"E", "F")
n = Split(TextBox1.Text & ".0", ".")
base = 16
num = n(0)
frac = n(1)
res = 0

i=0
While num <> ""
remainder = Right(num, 1)
Dim pos
pos = CInt(Application.Match(remainder, val)) - 1
res = res + pos * (base ^ i)
num = Left(num, Len(num) - 1)
i=i+1
Wend

i=1
While frac <> ""
remainder = Left(frac, 1)
pos = CInt(Application.Match(remainder, val)) - 1
178
res = res + pos / (base ^ i)
frac = Right(frac, Len(frac) - 1)
i=i+1
Wend

Label4.Caption = res
End Sub
13) A variable named val is declared and initialized with values “0” to “F” to
represent the 16 hexadecimal numbers.
14) The hexal number entered in TextBox1 is split into integer (variable num)
and fraction (variable frac) parts.
15) The right most digit of the integer part is extracted in remainder,
converted to decimal value by calling Application.Match and assigned to
variable named pos, then pos is multiplied by base (16) power digit count
(i) and added to res. The right most digit is removed from the num part
using Left function and providing length of string minus 1 against new
length.
16) The left most digit of the fraction part is extracted in remainder,
converted to decimal value by calling Application.Match and assigned to
variable named pos, then pos is divided by base (8) power digit count (i)
and added to res. The left most digit is removed from the frac part using
right function and providing length of string minus 1 against new length.
17) The result of hexadecimal to decimal conversion is displayed through
Label4.Caption property.
Ex. No.: 81
Date: 14.05.2018
AIM: To Convert a number from decimal to binary
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.

179
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter against TextAlign, Decimal to Binary against Caption,
Tahoma, Bold, 16 pt against Font, Dark red against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to
Decimal. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor
and 1 – fmTextAlignLeft against TextAlign.
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert CommandButton1. Set Tahoma, Bold, 14pt against Font, Convert
against Caption, Hightlight against ForeColor.
10) Copy Label2, paste it and drag it below CommandButton1 to create
Label3. Change Caption to Binary.
11) Copy Label3, paste it and drag it to the right of Label3 to get Label4. Make
Caption blank for the label.
12) Double click CommandButton1, enter the following code:

Option Explicit
Private Sub CommandButton1_Click()
Dim res, num, frac
Dim base, remainder, i As Integer
Dim n
n = Split(TextBox1.Text & ".0", ".")
base = 2
num = n(0)
frac = "0." & n(1)

If num = 0 Then
res = "0"
Else
res = ""
End If

Do While num > 0


remainder = ((num / base) - (num \ base)) * base
res = remainder & res
num = (num - remainder) / base
Loop

res = res & "."


Do While frac > 0
remainder = CInt((frac * base) \ 1)
res = res & remainder
180
frac = (frac * base) - remainder
Loop

Label4.Caption = res
End Sub
13) The decimal number entered in TextBox1 is split into integer (variable
num) and fraction (variable frac) parts.
14) The remainder of division by the base number (2 in the present case), is
assigned to the variable named remainder. The remainder value is
prepended to the left of the res variable. The quotient of division of num
by base is assigned to variable num again for next iteration of the while
loop. The loop runs when the number is not zero.
15) The fraction part is multiplied by base (2) and the integer part is extracted
and added to the right portion of the res variable. The new value of frac
is the fractional part remaining after multiplication by the base (2 in the
present case).
16) The result of decimal to binary conversion is displayed through
Label4.Caption property.

Ex. No.: 82
Date: 14.05.2018
AIM: To Convert a number from decimal to octal
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter against TextAlign, Decimal to Octal against Caption,
Tahoma, Bold, 16 pt against Font, Dark red against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to
Decimal. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor
and 1 – fmTextAlignLeft against TextAlign.

181
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert CommandButton1. Set Tahoma, Bold, 14pt against Font, Convert
against Caption, Hightlight against ForeColor.
10) Copy Label2, paste it and drag it below CommandButton1 to create
Label3. Change Caption to Octal.
11) Copy Label3, paste it and drag it to the right of Label3 to get Label4. Make
Caption blank for the label.
12) Double click CommandButton1, enter the following code:

Option Explicit
Private Sub CommandButton1_Click()
Dim res, num, frac
Dim base, remainder, i As Integer
Dim n
n = Split(TextBox1.Text & ".0", ".")
base = 8
num = n(0)
frac = "0." & n(1)

If num = 0 Then
res = "0"
Else
res = ""
End If

Do While num > 0


remainder = ((num / base) - (num \ base)) * base
res = remainder & res
num = (num - remainder) / base
Loop
res = res & "."
Do While frac > 0
remainder = CInt((frac * base) \ 1)
res = res & remainder
frac = (frac * base) - remainder
Loop
Label4.Caption = res
End Sub
13) The decimal number entered in TextBox1 is split into integer (variable
num) and fraction (variable frac) parts.

182
14) The remainder of division by the base number (8 in the present case), is
assigned to the variable named remainder. The remainder value is
prepended to the left of the res variable. The quotient of division of num
by base is assigned to variable num again for next iteration of the while
loop. The loop runs when the number is not zero.
15) The fraction part is multiplied by base (8) and the integer part is extracted
and added to the right portion of the res variable. The new value of frac
is the fractional part remaining after multiplication by the base (8 in the
present case).
16) The result of decimal to octal conversion is displayed through
Label4.Caption property.
Ex. No.: 83
Date: 14.05.2018
AIM: To Convert a number from decimal to hexadecimal
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter against TextAlign, Decimal to Hexal against Caption,
Tahoma, Bold, 16 pt against Font, Dark red against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to
Decimal. Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor
and 1 – fmTextAlignLeft against TextAlign.
8) Insert TextBox1 to the right of the second Label. Set Tahoma, Bold, 14pt
against Font, Highlight against ForeColor and 1 – fmTextAlignLeft against
TextAlign.
9) Insert CommandButton1. Set Tahoma, Bold, 14pt against Font, Convert
against Caption, Hightlight against ForeColor.
10) Copy Label2, paste it and drag it below CommandButton1 to create
Label3. Change Caption to Hexal.
11) Copy Label3, paste it and drag it to the right of Label3 to get Label4. Make
Caption blank for the label.
183
12) Double click CommandButton1, enter the following code:

Option Explicit
Private Sub CommandButton1_Click()
Dim res, num, frac
Dim base, remainder, i As Integer
Dim n, val
val = Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E",
"F")
n = Split(TextBox1.Text & ".0", ".")
base = 16
num = n(0)
frac = "0." & n(1)

If num = 0 Then
res = "0"
Else
res = ""
End If

Do While num > 0


remainder = ((num / base) - (num \ base)) * base
res = val(remainder) & res
num = (num - remainder) / base
Loop

res = res & "."


Do While frac > 0
remainder = CInt((frac * base) \ 1)
res = res & val(remainder)
frac = (frac * base) - remainder
Loop

Label4.Caption = res
End Sub
13) The decimal number entered in TextBox1 is split into integer (variable
num) and fraction (variable frac) parts.
14) The remainder of division by the base number (16 in the present case), is
assigned to the variable named remainder. The remainder value is
prepended to the left of the res variable. The quotient of division of num
by base is assigned to variable num again for next iteration of the while
loop. The loop runs when the number is not zero.

184
15) The fraction part is multiplied by base (16) and the integer part is
extracted and added to the right portion of the res variable. The new value
of frac is the fractional part remaining after multiplication by the base (16
in the present case).
16) The result of decimal to hexadecimal conversion is displayed through
Label4.Caption property.
Ex. No.: 84
Date: 14.05.2018
AIM: To add binary, octal or hexadecimal numbers
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter against TextAlign, Addition of binary, octal and Hexal
numbers against Caption, Tahoma, Bold, 16 pt against Font, Dark red
against ForeColor.
7) Insert Label2 below the caption (left part of form), set the caption to Base.
Set Tahoma, Bold, 14pt against Font, Highlight against ForeColor and 1 –
fmTextAlignLeft against TextAlign.
8) Insert ListBox1. Choose View->Code (F7) from menu. Choose UserForm
from Left side and Activate from right side comboboxes. Private Sub
UserForm_Activate appears. Choose With ListBox1 followed by 3
.AddItem statements to add Binary, Octal and Hexadecimal to the list.
9) Copy Label2. Paste it below Base to get Label3. Edit caption to Enter x.
Insert TextBox1 to the right of Label3. Change Font to Tahoma, Bold, 14pt.
10) Copy Label2. Paste it below Enter x to get Label4. Edit caption to Enter y.
Insert TextBox2 to the right of Label3. Change Font to Tahoma, Bold, 14pt.
11) Insert CommandButton1. Set Tahoma, Bold, 14pt against Font, Add
against Caption, Hightlight against ForeColor.
12) Copy Label2, paste it and drag it below CommandButton1 to create
Label5. Change Caption to Result.

185
13) Copy Label5, paste it and drag it to the right of Label5 to get Label6. Make
Caption blank for the Label6.
14) Double click CommandButton1, enter the following code:

Option Explicit
Private Sub CommandButton1_Click()
Dim opt As String
opt = ListBox1.Value
If opt = "Binary" Then
addbin
ElseIf opt = "Octal" Then
addoct
Else
addhex
End If

End Sub z = dec2hex("" & z)


Label6.Caption = z
Private Sub addbin() End Sub
Dim x, y, z
x = CDbl(bin2dec(TextBox1.Text)) Private Sub UserForm_Activate()
y = CDbl(bin2dec(TextBox2.Text)) With ListBox1
MsgBox x & " + " & y .AddItem "Binary"
z=x+y .AddItem "Octal"
MsgBox z .AddItem "Hexadecimal"
z = dec2bin("" & z) End With
Label6.Caption = z End Sub
End Sub
Private Function bin2dec(txt)
Private Sub addoct() Dim res, num, frac
Dim x, y, z Dim base, remainder, i As Integer
x = CDbl(oct2dec(TextBox1.Text)) Dim n
y = CDbl(oct2dec(TextBox2.Text)) n = Split(txt & ".0", ".")
z=x+y base = 2
z = dec2oct("" & z) num = n(0)
Label6.Caption = z frac = n(1)
End Sub res = 0

Private Sub addhex() i=0


Dim x, y, z While num <> ""
x = CDbl(hex2dec(TextBox1.Text)) remainder = Right(num, 1)
y = CDbl(hex2dec(TextBox2.Text)) res = res + remainder * (base ^ i)
z=x+y num = Left(num, Len(num) - 1)
186
i=i+1
Wend Private Function hex2dec(txt)
Dim res, num, frac
i=1 Dim base, remainder, i As Integer
While frac <> "" Dim val, n
remainder = Left(frac, 1) val = Array("0", "1", "2", "3", "4",
res = res + remainder / (base ^ i) "5", "16", "7", "8", "9", "A", "B",
frac = Right(frac, Len(frac) - 1) "C", "D", "E", "F")
i=i+1 n = Split(txt & ".0", ".")
Wend base = 16
num = n(0)
bin2dec = res frac = n(1)
End Function res = 0

Private Function oct2dec(txt) i=0


Dim res, num, frac While num <> ""
Dim base, remainder, i As Integer remainder = Right(num, 1)
Dim n Dim pos
n = Split(txt & ".0", ".") pos =
base = 8 CInt(Application.Match(remainder,
num = n(0) val)) - 1
frac = n(1) res = res + pos * (base ^ i)
res = 0 num = Left(num, Len(num) - 1)
i=i+1
i=0 Wend
While num <> ""
remainder = Right(num, 1) i=1
res = res + remainder * (base ^ i) While frac <> ""
num = Left(num, Len(num) - 1) remainder = Left(frac, 1)
i=i+1 pos =
Wend CInt(Application.Match(remainder,
val)) - 1
i=1 res = res + pos / (base ^ i)
While frac <> "" frac = Right(frac, Len(frac) - 1)
remainder = Left(frac, 1) i=i+1
res = res + remainder / (base ^ i) Wend
frac = Right(frac, Len(frac) - 1)
i=i+1 hex2dec = res
Wend End Function

oct2dec = res
End Function Private Function dec2bin(txt)
Dim res, num, frac
187
Dim base, remainder, i As Integer End If
Dim n
n = Split(txt & ".0", ".") Do While num > 0
base = 2 remainder = ((num / base) - (num \
num = n(0) base)) * base
frac = "0." & n(1) res = remainder & res
num = (num - remainder) / base
If num = 0 Then Loop
res = "0" res = res & "."
Else Do While frac > 0
res = "" remainder = CInt((frac * base) \ 1)
End If res = res & remainder
frac = (frac * base) - remainder
Do While num > 0 Loop
remainder = ((num / base) - (num \ dec2oct = res
base)) * base End Function
res = remainder & res
num = (num - remainder) / base Private Function dec2hex(txt)
Loop Dim res, num, frac
Dim base, remainder, i As Integer
res = res & "." Dim n, val
Do While frac > 0 val = Array("0", "1", "2", "3", "4",
remainder = CInt((frac * base) \ 1) "5", "6", "7", "8", "9", "A", "B", "C",
res = res & remainder "D", "E", "F")
frac = (frac * base) - remainder n = Split(txt & ".0", ".")
Loop base = 16
num = n(0)
dec2bin = res frac = "0." & n(1)
End Function
If num = 0 Then
Private Function dec2oct(txt) res = "0"
Dim res, num, frac Else
Dim base, remainder, i As Integer res = ""
Dim n End If
n = Split(txt & ".0", ".")
base = 8 Do While num > 0
num = n(0) remainder = ((num / base) - (num \
frac = "0." & n(1) base)) * base
res = val(remainder) & res
If num = 0 Then num = (num - remainder) / base
res = "0" Loop
Else
res = "" res = res & "."
188
Do While frac > 0 Loop
remainder = CInt((frac * base) \ 1)
res = res & val(remainder) dec2hex = res
frac = (frac * base) - remainder End Function

15) Choose the base and enter valid numbers of given base (binary, octal or
hexadecimal).
16) The choice of base is obtained using ListBox1.Value.
17) The If conditions call addbin, addoct or addhex based on the choice
selected in ListBox1.
18) The values from TextBox1 and TextBox2 are assigned to variables x and y.
The values of x and y are converted to decimal, added and result assigned
to z.
19) The value of z is converted to chosen base and the value of z is displayed
by setting Label6.Caption property.
Ex. No.: 85
Date: 15.05.2018
AIM: String manipulation using VBA
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank
form. A form and a set of tools (containing Label, TextBox,
ComboBox, ListBox, CheckBox, OptionBox, ToggleButton,
Frame, CommandButton, TabStrip, MultiPage, ScrollBar,
SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties
window appears. Set 2 – fmTextAlignCenter against
TextAlign, String functions in VBA against Caption,
Tahoma, Bold, 16 pt against Font, Dark red against
ForeColor.
7) Insert ListBox1. Choose View->Code (F7) from menu. Choose UserForm
from Left side and Activate from right side comboboxes. Private Sub
UserForm_Activate appears. Choose With ListBox1 followed by 3
.AddItem statements to add String function names to the list.

189
8) Insert CommandButton1. Set Tahoma, Bold, 14pt against Font, Process
against Caption, Hightlight against ForeColor.
9) Insert Frame1 below the button. Set its caption to result.
10) Insert TextBox1 inside the frame. Format the box as per standard practice.
11) Double click CommandButton1, enter the following code:

Option Explicit s1 = InputBox("Enter a long string")


Private Sub s2 = InputBox("Enter number of
CommandButton1_Click() characters")
Dim s1, s2, s3, choice As String TextBox1.Text = Left(s1, CInt(s2))
choice = ListBox1.Value ElseIf choice = "LEN" Then
s1 = InputBox("Enter a string")
If choice = "ASC" Then TextBox1.Text = Len(s1)
s1 = InputBox("Enter a character") ElseIf choice = "LTRIM" Then
TextBox1.Text = Asc(s1) s1 = InputBox("Enter a string
ElseIf choice = "CHR" Then starting with several spaces")
s1 = InputBox("Enter an ASCII TextBox1.Text = LTrim(s1)
number") ElseIf choice = "MID" Then
TextBox1.Text = Chr(s1) s1 = InputBox("Enter a string")
ElseIf choice = "&" Then s2 = InputBox("Ënter start
s1 = InputBox("Enter string 1") position")
s2 = InputBox("Enter string 2") s3 = InputBox("Ënter number of
TextBox1.Text = s1 & " " & s2 characters")
ElseIf choice = "FORMAT" Then TextBox1.Text = Mid(s1, CInt(s2),
s1 = InputBox("Enter a number") CInt(s3))
s2 = InputBox("Enter format string ElseIf choice = "REPLACE" Then
(#-Optional character, 0- s1 = InputBox("Enter a string")
Compulsory character)") s2 = InputBox("Ënter search string")
TextBox1.Text = Format(s1, s2) s3 = InputBox("Ënter replacement
ElseIf choice = "INSTR" Then string")
s1 = InputBox("Enter a long string") TextBox1.Text = Replace(s1, s2, s3)
s2 = InputBox("Enter substring to ElseIf choice = "RIGHT" Then
search") s1 = InputBox("Enter a string")
TextBox1.Text = InStr(s1, s2) s2 = InputBox("Ënter number of
ElseIf choice = "INSTRREV" Then characters from right")
s1 = InputBox("Enter a long string") TextBox1.Text = Right(s1, CInt(s2))
s2 = InputBox("Enter substring to ElseIf choice = "RTRIM" Then
search from end") s1 = InputBox("Enter a string with
TextBox1.Text = InStrRev(s1, s2) spaces at end")
ElseIf choice = "LCASE" Then TextBox1.Text = RTrim(s1)
s1 = InputBox("Enter a long string") ElseIf choice = "SPACE" Then
TextBox1.Text = LCase(s1) s1 = InputBox("Enter number of
ElseIf choice = "LEFT" Then spaces to create")
190
TextBox1.Text = Space(CInt(s1)) s1 = InputBox("Enter a string in
ElseIf choice = "SPLIT" Then mixed case")
TextBox1.Text = "" TextBox1.Text = UCase(s1)
s1 = InputBox("Enter a string") ElseIf choice = "VAL" Then
s2 = InputBox("Ënter character at s1 = InputBox("Enter a string
which to split") containing numbers")
Dim arr, ln, i TextBox1.Text = Val(s1)
arr = Split(s1, s2) End If
ln = UBound(arr) - LBound(arr) + 1 End Sub
For i = 0 To ln - 1 Step 1
TextBox1.Text = TextBox1.Text & Private Sub UserForm_Activate()
arr(i) & vbCrLf With ListBox1
Next i .AddItem "ASC"
ElseIf choice = "STR" Then .AddItem "CHR"
Dim n As Double .AddItem "&"
s1 = InputBox("Enter a number") .AddItem "FORMAT"
n = CDbl(s1) .AddItem "INSTR"
TextBox1.Text = Str(n) .AddItem "INSTRREV"
ElseIf choice = "STRCOMP" Then .AddItem "LCASE"
s1 = InputBox("Enter first string") .AddItem "LEFT"
s2 = InputBox("Ënter second .AddItem "LEN"
string") .AddItem "LTRIM"
TextBox1.Text = StrComp(s1, s2) .AddItem "MID"
ElseIf choice = "STRCONV" Then .AddItem "REPLACE"
s1 = InputBox("Enter string") .AddItem "RIGHT"
s2 = InputBox("Ënter conversion .AddItem "RTRIM"
type") .AddItem "SPACE"
TextBox1.Text = StrConv(s1, s2) .AddItem "SPLIT"
ElseIf choice = "STRREVERSE" Then .AddItem "STR"
s1 = InputBox("Enter a string") .AddItem "STRCOMP"
TextBox1.Text = StrReverse(s1) .AddItem "STRCONV"
ElseIf choice = "TRIM" Then .AddItem "STRREVERSE"
s1 = InputBox("Enter a string with .AddItem "TRIM"
spaces at beginning and end") .AddItem "UCASE"
TextBox1.Text = Trim(s1) .AddItem "VAL"
ElseIf choice = "UCASE" Then End With
End Sub

12) Choose the string function from ListBox1.


13) Press Process button to carry out appropriate string manipulation.
14) The result is displayed using TextBox1.Text property.

191
Ex. No.: 86
Date: 15.05.2018
AIM: Date manipulation using VBA
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window,
choose Developer->Visual Basic. New
window for GUI based form creation
appears.
5) Choose Insert->User form (Alt+I+U)
to insert a blank form. A form and a set
of tools (containing Label, TextBox,
ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame,
CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image)
appears.
6) Insert Label1 at the top of the form.
Properties window appears. Set 2 –
fmTextAlignCenter against TextAlign,
Date functions in VBA against Caption, Tahoma, Bold, 16 pt against Font,
Dark red against ForeColor.
7) Insert ListBox1. Choose View->Code (F7) from menu. Choose UserForm
from Left side and Activate from right side comboboxes. Private Sub
UserForm_Activate appears. Choose With ListBox1 followed by 3
.AddItem statements to add Date function names to the list.
8) Insert CommandButton1. Set Tahoma, Bold, 14pt against Font, Process
against Caption, Hightlight against ForeColor.
9) Insert Frame1 below the button. Set its caption to result.
10) Insert TextBox1 inside the frame. Format the box as per standard practice.
11) Double click CommandButton1, enter the following code:

Option Explicit
Private Sub CommandButton1_Click()
Dim s1, s2, s3, choice As String
choice = ListBox1.Value

192
Select Case choice
Case "DATE"
TextBox1.Text = Date
Case "DATEADD"
s1 = InputBox("Enter type of addition (yyyy/m/d/w/ww/h/n/s)")
s2 = InputBox("Enter duration")
s3 = InputBox("Enter date")
TextBox1.Text = DateAdd(s1, CInt(s2), CDate(s3))
Case "DATEDIFF"
s1 = InputBox("Enter type of difference (yyyy/m/d/w/ww/h/n/s)")
s2 = InputBox("Enter start date")
s3 = InputBox("Enter end date")
TextBox1.Text = DateDiff(s1, CDate(s2), CDate(s3))
Case "DATEPART"
s1 = InputBox("Enter part required (yyyy/m/d/w/ww/h/n/s)")
s2 = InputBox("Enter date")
TextBox1.Text = DatePart(s1, CDate(s2))
Case "DATEPART"
s1 = InputBox("Enter part required (yyyy/m/d/w/ww/h/n/s)")
s2 = InputBox("Enter date")
TextBox1.Text = DatePart(s1, CDate(s2))
Case "DATESERIAL"
s1 = InputBox("Enter year")
s2 = InputBox("Enter month")
s3 = InputBox("Enter day")
TextBox1.Text = DateSerial(s1, s2, s3)
Case "DATEVALUE"
s1 = InputBox("Enter date")
TextBox1.Text = DateValue(CDate(s1))
Case "DAY"
s1 = InputBox("Enter date")
TextBox1.Text = Day(CDate(s1))
Case "MONTH"
s1 = InputBox("Enter date")
TextBox1.Text = Month(CDate(s1))
Case "MONTHNAME"
s1 = InputBox("Enter month number")
TextBox1.Text = MonthName(s1)
Case "WEEKDAY"
s1 = InputBox("Enter date")
TextBox1.Text = Weekday(CDate(s1))
Case "WEEKDAYNAME"
s1 = InputBox("Enter day number (1 to 7)")
193
TextBox1.Text = WeekdayName(s1)
Case "YEAR"
s1 = InputBox("Enter date")
TextBox1.Text = Year(CDate(s1))
Case "FORMAT"
s1 = InputBox("Enter date")
s2 = InputBox("Enter format")
TextBox1.Text = Format(CDate(s1), s2)
Case "HOUR"
s1 = InputBox("Enter time (hh:mm:ss)")
TextBox1.Text = Hour(TimeValue(s1))
Case "MINUTE"
s1 = InputBox("Enter time (hh:mm:ss)")
TextBox1.Text = Minute(TimeValue(s1))
Case "NOW"
TextBox1.Text = Now
Case "TIMESERIAL"
s1 = InputBox("Enter hour")
s2 = InputBox("Enter minute")
s3 = InputBox("Enter seconds")
TextBox1.Text = TimeSerial(s1, s2, s3)
Case "TIMEVALUE"
s1 = InputBox("Enter time (hh:mm:ss)")
TextBox1.Text = TimeValue(TimeValue(s1))
End Select
End Sub

Private Sub UserForm_Activate()


With ListBox1
.AddItem "DATE"
.AddItem "DATEADD"
.AddItem "DATEDIFF"
.AddItem "DATEPART"
.AddItem "DATESERIAL"
.AddItem "DATEVALUE"
.AddItem "DAY"
.AddItem "MONTH"
.AddItem "MONTHNAME"
.AddItem "WEEKDAY"
.AddItem "WEEKDAYNAME"
.AddItem "YEAR"
.AddItem "FORMAT"
.AddItem "HOUR"
194
.AddItem "MINUTE"
.AddItem "NOW"
.AddItem "TIMESERIAL"
.AddItem "TIMEVALUE"
End With
End Sub
12) Choose the Date function from ListBox1.
13) Press Process button to carry out appropriate string manipulation.
14) The result is displayed using TextBox1.Text property.
Ex. No.: 87
Date: 15.05.2018
AIM: Math functions in VBA
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and
place a tick mark against Developer on the right panel.
On pressing OK button, new menu named Developer
appears on the menu bar.
4) To open VBA design window, choose Developer-
>Visual Basic. New window for GUI based form creation
appears.
5) Choose Insert->User form (Alt+I+U) to insert a
blank form. A form and a set of tools (containing Label,
TextBox, ComboBox, ListBox, CheckBox, OptionBox,
ToggleButton, Frame, CommandButton, TabStrip, MultiPage, ScrollBar,
SpinButton and Image) appears.
6) Insert Label1 at the top of the form. Properties window appears. Set 2 –
fmTextAlignCenter against TextAlign, Math functions in VBA against
Caption, Tahoma, Bold, 16 pt against Font, Dark red against ForeColor.
7) Insert ListBox1. Choose View->Code (F7) from menu. Choose UserForm
from Left side and Activate from right side comboboxes. Private Sub
UserForm_Activate appears. Choose With ListBox1 followed by 3
.AddItem statements to add Date function names to the list.
8) Insert CommandButton1. Set Tahoma, Bold, 14pt against Font, Process
against Caption, Hightlight against ForeColor.
9) Insert Frame1 below the button. Set its caption to result.
10) Insert TextBox1 inside the frame. Format the box as per standard practice.
11) Double click CommandButton1, enter the following code:

Option Explicit
195
Private Sub Case "^"
CommandButton1_Click() n = InputBox("Enter a number")
Dim n, m As Double m = InputBox("Enter power")
Dim str, choice As String TextBox1.Text = n ^ m
choice = ListBox1.Value Case "RANDOMIZE"
Randomize
Select Case choice MsgBox ("Random seed
Case "ABS" initialized")
n = InputBox("Enter negative TextBox1.Text = Rnd
number") Case "RND"
TextBox1.Text = Abs(n) TextBox1.Text = Rnd
Case "ATN" Case "ROUND"
n = InputBox("Enter a number to n = InputBox("Enter a floating
calculate tan inverse") point number")
TextBox1.Text = Atn(n) m = InputBox("Enter number of
Case "COS" digits")
n = InputBox("Enter an angle TextBox1.Text = Round(n, m)
(radian)") Case "SGN"
TextBox1.Text = Cos(n) n = InputBox("Enter a positive or
Case "EXP" negative number")
n = InputBox("Enter number to TextBox1.Text = Sgn(n)
calculate exponential value") Case "SIN"
TextBox1.Text = Exp(n) n = InputBox("Enter an angle")
Case "FIX" TextBox1.Text = Sin(n)
n = InputBox("Enter floating Case "SQR"
point number") n = InputBox("Enter a number to
TextBox1.Text = Fix(n) calculate square root")
Case "FORMAT" TextBox1.Text = Sqr(n)
n = InputBox("Enter a number") Case "TAN"
str = InputBox("ENter format n = InputBox("Enter an angle")
string") TextBox1.Text = Tan(n)
TextBox1.Text = Format(n, str) End Select
Case "INT" End Sub
n = InputBox("Enter floating
point number") Private Sub UserForm_Activate()
TextBox1.Text = Int(n) With ListBox1
Case "LOG" .AddItem "ABS"
n = InputBox("Enter a number") .AddItem "ATN"
TextBox1.Text = Log(n) .AddItem "COS"
Case "LOG10" .AddItem "EXP"
n = InputBox("Enter a number") .AddItem "FIX"
TextBox1.Text = Log(n) * .AddItem "FORMAT"
Log(Exp(1)) .AddItem "INT"
196
.AddItem "LOG" .AddItem "SGN"
.AddItem "LOG10" .AddItem "SIN"
.AddItem "^" .AddItem "SQR"
.AddItem "RANDOMIZE" .AddItem "TAN"
.AddItem "RND" End With
.AddItem "ROUND" End Sub
12) Choose the Date function from ListBox1.
13) Press Process button to carry out appropriate string manipulation.
14) The result is displayed using TextBox1.Text property.
Ex. No.: 88
Date: 20.05.2017
AIM: Creating calculator using VBA
PROCEDURE
1) Open MS Excel (Windows+R) to open run dialog, type “excel” and press
enter).
2) Click Developer Menu, choose Visual Basic (or press Alt+F11) to open
Visual Basic for Applications (VBA).
3) Choose Insert->User Form (Alt+I+U) from the menu.
4) Change the name of form in the Properties Window (say Calculator).
5) Insert CommandButtons for with captions 1, 2, 3, ..., 9, 0, +, -, *, / and =.
6) Insert 2 labels (Label1 and Label2) for displaying the input string and the
result. Change TextAlign property to TextAlignRight in properties window
for the Labels.
7) Double click on each button (like CommandButton1, CommandButton2,
etc.) and enter the code to add numbers to variables called a, b and an
operator named op:

Option Explicit Private Sub


CommandButton10_Click()
Dim a, b, op As String op = "+"
Dim c As Double display
End Sub
Private Sub
CommandButton1_Click() Private Sub
If (Len(op) = 0) Then CommandButton11_Click()
a = a & "1" op = "*"
Else display
b = b & "1" End Sub
End If
display Private Sub
End Sub CommandButton12_Click()
op = "-"
display
197
End Sub b = ""
op = ""
Private Sub display
CommandButton13_Click() End Sub
op = "/"
display Private Sub
End Sub CommandButton2_Click()
If (Len(op) = 0) Then
Private Sub a = a & "2"
CommandButton14_Click() Else
If (Len(op) = 0) Then b = b & "2"
a = a & "." End If
Else display
b = b & "." End Sub
End If
display
End Sub Private Sub display()
Label1.Caption = a & op & b
Private Sub End Sub
CommandButton15_Click()
If (Len(op) = 0) Then Private Sub
a = a & "0" CommandButton3_Click()
Else If (Len(op) = 0) Then
b = b & "0" a = a & "3"
End If Else
display b = b & "3"
End Sub End If
display
Private Sub End Sub
CommandButton16_Click()
Select Case op Private Sub
Case "+" CommandButton4_Click()
c = CDbl(a) + CDbl(b) If (Len(op) = 0) Then
Case "-" a = a & "4"
c = CDbl(a) - CDbl(b) Else
Case "*" b = b & "4"
c = CDbl(a) * CDbl(b) End If
Case "/" display
c = CDbl(a) / CDbl(b) End Sub

End Select Private Sub


Label2.Caption = c CommandButton5_Click()
a = "" If (Len(op) = 0) Then
198
a = a & "5" End If
Else display
b = b & "5" End Sub
End If
display Private Sub
End Sub CommandButton8_Click()
If (Len(op) = 0) Then
Private Sub a = a & "8"
CommandButton6_Click() Else
If (Len(op) = 0) Then b = b & "8"
a = a & "6" End If
Else display
b = b & "6" End Sub
End If
display Private Sub
End Sub CommandButton9_Click()
If (Len(op) = 0) Then
Private Sub a = a & "9"
CommandButton7_Click() Else
If (Len(op) = 0) Then b = b & "9"
a = a & "7" End If
Else display
b = b & "7" End Sub

8) Option Explicit on line 1 specifies that all variables should be explicitly


declared before using the variable.
9) Variables named a, b and op are declared with data type String and the
variable c is declared with data type Double.
10) In the subroutines for buttons 0 to 9 and . , the input value should be
added to the variable a if op is not set and variable b if op is set.
11) When the buttons for operators +, -, * and /
are pressed, the respective operator value is
assigned to the variable op.
12) The last line of the functions for 0 to 9, ., +, -, *
and / is display. This function simply sets the
Caption for Label1 with the value of the string
a op b.
13) The processing takes place when = button is
pressed. A Select Case condition calculates the
result based on the chosen operator and the
result is assigned to the variable c.

199
14) The result is displayed at the end of the function by setting the Caption of
Label2 to the variable c. Caption for Label1 is cleared.
15) Variables a, b and op are to be set to an empty string.
16) Run the program using Run->Run Sub/UserForm or by pressing F5.
17) Whether the calculator works as expected by providing test input values
for calculation of results.
Ex. No.: 89
Date: 21.05.2018
AIM: Accessing cell contents using Range and Cells functions
PROCEDURE:
1) Start Microsoft Excel by pressing Windows+R and typing Excel in the run
dialog.
2) Select File->Options. A dialog with an options panel on left and details
panel on the right appears.
3) Choose Customize Ribbon on the left panel and place a tick mark against
Developer on the right panel. On pressing OK button, new menu named
Developer appears on the menu bar.
4) To open VBA design window, choose Developer->Visual Basic. New
window for GUI based form creation appears.
5) Choose Insert->User form (Alt+I+U) to insert a blank form. A form and a
set of tools (containing Label, TextBox, ComboBox, ListBox, CheckBox,
OptionBox, ToggleButton, Frame, CommandButton, TabStrip, MultiPage,
ScrollBar, SpinButton and Image) appears.
6) Change the name of form in the Properties Window (say Repeat).
7) Insert CommandButton1 and CommandButton2, rename them to 100
Times and 200 Times respectively. Change the Font to Tahome, 14pt, Bold
and set the colour appropriately.
8) Double click on each button (like CommandButton1 and
CommandButton2, respectively) and enter the following code:

Private Sub CommandButton1_Click()


Worksheets("Sheet1").Activate
ActiveSheet.Range("A1:A100").Value = "If I say once, it is as if I said 100
times!"
ActiveSheet.Range("A1:A100").Font.FontStyle
= "Bold"
ActiveSheet.Range("A1:A100").Font.Size = 14
ActiveSheet.Range("A1").Speak
End Sub

Private Sub CommandButton2_Click()


For i = 101 To 200 Step 1
Sheet1.Cells(i, 1) = "If I say once, it is as if I said 200 times!"
200
Sheet1.Cells(i, 1).Font.Size = 16
Sheet1.Cells(i, 1).Font.FontStyle = "Italic"
Next i
Sheet1.Cells(101, 1).Speak
End Sub
9) Worksheets function selects sheet1 and activates the same. Range
function takes address values like “A1”, “B1”, “A1:A100”, etc.
10) Sheet1.Cells function sets values for particular cell of Sheet1.
11) Font and Style can be specified using sheet functions.
12) Speak function speaks the contents of specified cell.

Ex. No.: 90
Date: 21.05.2017
AIM: Creating custom VBA functions for temperature conversion, sum, sum of
squares, sum of cubes, factorial and Fibonacci series
PROCEDURE
PROCEDURE:
1) Open MS Excel (Windows+R to open run dialog, type “excel” and press
enter).
2) Click Developer Menu, choose Visual Basic (or press Alt+F11) to open
Visual Basic for Applications (VBA).
3) Choose Insert->Module (Alt+I+M) from the menu.
4) Type the following functions in the blank coding screen and save the file:
Function fc(f) As Double Next i
fc = (f - 32) * 5 / 9 End Function
End Function
Function smcb(x) As Long
Function cf(c) As Double smcb = 0
cf = 9 / 5 * c + 32 For i = 1 To x Step 1
End Function smcb = smcb + i ^ 3
Next i
Function sm(x) As Long End Function
sm = 0
For i = 1 To x Step 1 Function fct(x) As Long
sm = sm + i fct = 1
Next i For i = 1 To x Step 1
End Function fct = fct * i
Next i
Function smsq(x) As Long End Function
smsq = 0
For i = 1 To x Step 1 Function fib(n) As String
smsq = smsq + i ^ 2 fib = "1"
201
x = "1" x=y
y = "1" y=Z
For i = 2 To n Step 1 Next i
fib = fib & ", " & y End Function
Z = CLng(x) + CLng(y)
5) These lines create 7 functions, viz., cf, fc, sm, smsq, smcb, fct and fib for
temperature conversion, sum of series, sum of squares, sum of cubes
factorial and Fibonacci series.
6) Ensure that the values and formulae on left side are entered correctly to
produce the results shown on the right side.
Value Result
32 =fc(A2) Value Result
25 =cf(A3) 32 0
102 =fc(A4) 25 77
113 =fc(A5) 102 38.88888889
20 =sm(A6) 113 45
20 =smsq(A7) 20 210
20 =smcb(A8) 20 2870
10 =fct(A9) 20 44100
10 =fib(A10) 10 3628800
10 1, 1, 2, 3, 5, 8, 13, 21, 34,

Ex. No.: 91
Date: 22.05.2017
AIM: Creating custom VBA form for displaying a message based on age (use of
IF condition)
PROCEDURE
PROCEDURE:
1) Open MS Excel (Windows+R to open run dialog, type “excel” and press
enter).
2) Click Developer Menu, choose Visual Basic (or press Alt+F11) to open
Visual Basic for Applications (VBA).
3) Choose Insert->User Form (Alt+I+U) from the menu.
4) Toolbox containing commonly used Graphical User Interface (GUI)
elements may be accessed using View->Toolbox menu (Alt+V+X).
5) Drag a label (Label1) and change its Caption to “Enter age: ”. Change Font
to Tahoma, 14 points, Bold.
6) Drag a TextBox (TextBox1) and place it to the right
of the label. Set font to Tahoma, 14 points, Bold.
7) Drag a command button (CommandButton1) and
drop it in the form. Change its Caption to
“Message”. Set Font to Tahoma, 14 points, bold.
8) Double click CommandButton1 and enter the following code:

202
Private Sub MsgBox ("You are young!")
CommandButton1_Click() ElseIf age < 40 Then
Dim age As Integer MsgBox ("You are middle aged!")
age = CInt(TextBox1.Text) ElseIf age < 50 Then
If age < 13 Then MsgBox ("You are quiet old!")
MsgBox ("You are a kid!") Else
ElseIf age < 20 Then MsgBox ("You are old")
MsgBox ("You are teenager!") End If
ElseIf age < 30 Then End Sub
9) Test the program by pressing F5. Enter several ages and verify the result.
Ex. No.: 92
Date: 22.05.2017
AIM: Using MultiPage control in VBA
PROCEDURE
1) Open MS Excel (Windows+R) to open run dialog, type “excel” and press
enter).
2) Click Developer Menu, choose Visual Basic (or press Alt+F11) to open
Visual Basic for Applications (VBA).
3) Choose Insert->User Form (Alt+I+U) from the menu.
4) Toolbox containing commonly used Graphical User Interface (GUI)
elements may be accessed using View->Toolbox menu (Alt+V+X).
5) Drag MultiPage control and place it on the form (MultiPage1). Change the
Captions for Page1 and Page2 as Personal data and Mark details
respectively.
6) Select Personal data page.
7) Drag a label control (named Label1). Edit Caption property and set it to
“Name:”.
8) Drag a TextBox (named TextBox1) and place it near Label1.
9) Drag a label control (named Label2). Edit Caption property and set it to
“Mobile:”.
10) Drag a TextBox (named TextBox2) and place it near Label2.
11) Drag CommandButton1 and place it at the bottom right of Page1. Edit its
properties and set Caption to Next>, Font to Tahoma, 14pt, Bold.
12) Select Page2.
13) Drag a label control (named Label3). Edit Caption property and set it to
“Mark:”.
14) Drag a TextBox (named TextBox3) and place it near Label3.
15) Drag a label control (named Label4). Edit Caption property and set it to
“Percentage:”.
16) Drag a TextBox (named TextBox4) and place it near Label4.
17) Drag CommandButton2 and place it at the bottom left of Page2. Edit its
properties and set Caption to <Back, Font to Tahoma, 14pt, Bold.
18) Drag Button (named CommandButton3), edit its Caption to “Submit”.
19) Double click on the buttons and enter the following code:

Private Sub CommandButton1_Click()


MultiPage1.Value = 1
End Sub

Private Sub CommandButton2_Click()


MultiPage1.Value = 0
End Sub

Private Sub CommandButton3_Click()


MsgBox "Name: " & TextBox1.Text & Chr(10) & _
"Mobile: " & TextBox2.Text & Chr(10) & _
"Mark: " & TextBox3.Text & Chr(10) & _
"Percentage: " & TextBox4.Text
End Sub
20) Run the program using Run->Run
Sub/UserForm or by pressing F5.
21) Check whether the program displays the
controls based on page selection.
Ex. No.: 93
Date: 22.05.2018
AIM: Using RefEdit control for selection of cell values in Excel sheet.
PROCEDURE
1) Open MS Excel (Windows+R) to open run dialog, type “excel” and press
enter).
2) Click Developer Menu, choose Visual Basic (or press Alt+F11) to open
Visual Basic for Applications (VBA).
3) Choose Insert->User Form (Alt+I+U) from the menu.
4) Special objects may be accessed using View->Objects (F2) menu. It
contains a tool named RefEdit to select cell ranges in Excel spreadsheet.
5) Drag RefEdit control and place it on the form (named RefEdit1).
6) Drag Button (named Button1), edit its Caption to “Fill Text”.

204
7) Double click on the button and enter the
following code:

Private Sub CommandButton1_Click()


Dim x, selection As String
x = InputBox("Enter message: ")
selection = RefEdit1.Value
Range(selection).Value = x
End Sub

8) Run the program using Run->Run


Sub/UserForm or by pressing F5.
9) Double click on RefEdit1. Select cell values from spreadsheet. Press Enter
to complete the selection.
10) Press CommandButton1. Enter some message in the inputbox.
Check whether the selected cells get filled with given message.
Ex. No.: 94
Date: 22.05.2018
AIM: Creating Graph using VBA
PROCEDURE
1) Open MS Excel (Windows+R) to open run dialog, type “excel” and press
enter).
2) Enter the following data in Sheet1, in columns A1 to B7:
Pass
Year percentage
2005 85
2006 91
2007 93
2008 91
2009 95
2010 87

3) Click Developer Menu, choose Visual Basic (or press Alt+F11) to open
Visual Basic for Applications (VBA).
4) Choose Insert->User Form (Alt+I+U) from the menu.
5) Toolbox containing commonly used Graphical User Interface (GUI)
elements may be accessed using View->Toolbox menu (Alt+V+X).
6) Drag Button (named Button1), edit its Caption to “Line”.
7) Similarly, create buttons captioned Pie, Column and Bar.
8) Double click on the buttons and enter the following code:

Private Sub CommandButton1_Click()


205
Charts.Add
ActiveChart.ChartType = xlXYScatterSmoothNoMarkers
ActiveChart.SetSourceData (Sheets("Sheet1").Range("A1:B7"))
End Sub

Private Sub CommandButton2_Click()


Charts.Add
ActiveChart.ChartType = xl3DPie
ActiveChart.SetSourceData
(Sheets("Sheet1").Range("A1:B7"))
End Sub

Private Sub CommandButton3_Click()


Charts.Add
ActiveChart.ChartType = xl3DBarClustered
ActiveChart.SetSourceData (Sheets("Sheet1").Range("A1:B7"))
End Sub

Private Sub CommandButton4_Click()


Charts.Add
ActiveChart.ChartType = xl3DColumn
ActiveChart.SetSourceData (Sheets("Sheet1").Range("A1:B7"))
End Sub
9) Run the program using Run->Run Sub/UserForm or by pressing F5. Check
whether a correct type of graph is inserted every time a button pressed.
Ex. No.: 95
Date: 23.05.2018
AIM: OOPS using VBA – Creating Book class
PROCEDURE
1) Open MS Excel (Windows+R) to open run dialog, type “excel” and press
enter).
2) Click Developer Menu.
3) Choose Insert->Class Module (Alt+I+C) from the menu bar.
4) In properties window (F4), the name of class is displayed Class1. Change
the name property to Book.
5) Enter the following code in the class module window:

Dim t, a As String
Dim r As Double
Dim qty As Integer

Public Property Let title(x As String)


t=x
206
End Property
Public Property Get title() As String
title = t
End Property

Public Property Let author(x As String)


a=x
End Property
Public Property Get author() As String
author = a
End Property

Public Property Let rate(x As Double)


r=x
End Property
Public Property Get rate() As Double
rate = r
End Property

Public Property Let quantity(x As Integer)


qty = x
End Property
Public Property Get quantity() As Integer
quantity = qty
End Property

Public Property Get amount() As Integer


amount = r * qty
End Property

Public Function getValues() As String


getValues = "Title: " & t & vbCrLf & "Author: " & a & vbCrLf & _
"Rate: " & r & vbCrLf & "Quantity: " & _
qty & vbCrLf & "Amount: " & Me.amount
End Function

Public Sub display()


MsgBox Me.getValues()
End Sub

6) Choose Visual Basic (or press Alt+F11) to open Visual Basic for
Applications (VBA).
7) Choose Insert->User Form (Alt+I+U) from the menu.
207
8) Toolbox containing commonly used Graphical User Interface (GUI)
elements may be accessed using View->Toolbox menu (Alt+V+X).
9) Drag four Labels for prompt and 4 TextBoxes for input. Change the Label
captions to Title, Author, Rate and Quantity respectively.
10) Insert CommandButton1. Change its caption to Create book. Set other
properties.
11) Drag a TextBox (named TextBox5) and place it below command button.
Change its Multiline property to true, Srollbars to 3 – scrollBarsBoth.
12) Double click CommandButton1 and enter the following code to create
Book object:

Private Sub CommandButton1_Click()


Dim b As Book
Set b = New Book
b.title = CStr(TextBox1.Text)
b.author = TextBox2.Text
b.rate = CDbl(TextBox3.Text)
b.quantity = CInt(TextBox4.Text)
b.display
TextBox5.Text = b.getValues()
End Sub

13) Run the program using Run->Run Sub/UserForm or by pressing F5.


14) Enter values for Title (Let us C), Author (Kanetkar), Rate (240), Quantity
(3). Press CommandButton1 to verify that an instance of book class is
created (b), values are set and displayed correctly.

Ex. No.: 96
Date: 24.05.2018
AIM: OOPS using VBA – Creating Student class
PROCEDURE
1) Open MS Excel (Windows+R) to open run dialog, type “excel” and press
enter).
2) Click Developer Menu.
3) Choose Insert->Class Module (Alt+I+C) from the menu bar.
4) In properties window (F4), the name of class is displayed Class1. Change
the name property to Student.
5) Enter the following code in the class module window:

Private n As String
Private d As Date
Private m, t As Integer

208
Public Property Let name(x As String)
n=x
End Property

Public Property Get name() As String


name = n
End Property

Public Property Let dob(x As Date)


d=x
End Property

Public Property Get dob() As Date


dob = d
End Property

Public Property Let mark(x As Integer)


m=x
End Property

Public Property Get mark() As Integer


mark = m
End Property

Public Property Let total(x As Integer)


t=x
End Property
Public Property Get total() As Integer
total = t
End Property

Public Function percentage() As Double


percentage = m / t * 100#
End Function

Public Function age() As String


age = DateDiff("YYYY", d, Date)
End Function

Public Sub bye()


MsgBox (n & " says: Good Bye!")
End Sub

209
6) Choose Insert->User Form (Alt+I+U) from the menu.
7) Toolbox containing commonly used Graphical User Interface (GUI)
elements may be accessed using View->Toolbox menu (Alt+V+X).
8) Drag four Labels for prompt and 4 TextBoxes for input. Change the Label
captions to Name, DOB, Mark and Total respectively.
9) Insert CommandButton1. Change its caption to Create Student. Set other
properties.
10) Drag a TextBox (named TextBox5) and place it below command button.
Change its Multiline property to true, Srollbars to 3 – scrollBarsBoth.
11) Double click CommandButton1 and enter the following code to create
Book object:

Private Sub CommandButton1_Click()


Dim s As Student
Set s = New Student

s.name = TextBox1.Text
s.dob = CDate(TextBox2.Text)
s.mark = CInt(TextBox3.Text)
s.total = CInt(TextBox4.Text)

TextBox5.Text = "Nsme: " & s.name & Chr(10) & "Percentage = " &
s.percentage() & Chr(10) & "Age: " & s.age()
s.bye
End Sub
12) Run the program using Run->Run Sub/UserForm or by pressing F5.
13) Enter values for name, DOB, mark and total mark.
14) Press CommandButton1 to verify that an instance of Student class is
created, values are correctly set, and results are displayed correctly.
Ex. No.: 97
Date: 25.05.2018
AIM: Connecting to MS Access database from VBA
PROCEDURE
1) Open MS Access. Create a new table named mark with the columns of ID,
Name and mark.
2) Fill some sample data. Save the file with the name of temp.accdb in the
folder c:\users\<your_name>\temp.accdb.
3) Open MS Excel (Windows+R) to open run dialog, type “excel” and press
enter).
4) Click Developer Menu.
5) Choose Insert->User Form (Alt+I+U) from the menu.
6) Toolbox containing commonly used Graphical User Interface (GUI)
elements may be accessed using View->Toolbox menu (Alt+V+X).
210
7) Insert CommandButton1. Change its caption to Create Student. Set other
properties.
8) Double click CommandButton1 and enter the following code to create
Book object:

Private Sub CommandButton1_Click()


Dim cn, rs As Object
Set cn = CreateObject("ADODB.Connection")
Set rs = CreateObject("ADODB.Recordset")
cn.Open "Provider=Microsoft.ACE.OLEDB.12.0; Data
Source=c:\users\vn\Documents\temp.accdb;"
rs.Open "SELECT * FROM mark", cn

For i = 1 To rs.Fields.Count Step 1


Sheet1.Cells(1, i) = rs.Fields(i - 1).Name
Next i
Sheet1.Range("A2").CopyFromRecordset rs
rs.Close
Set rs = Nothing
cn.Close
Set cn = Nothing
End Sub
9) Run the program using Run->Run Sub/UserForm or by pressing F5.
10) The program creates database connection object named cn.
11) Open database connection using the cn.Open method with the following
string as argument: cn.Open "Provider=Microsoft.ACE.OLEDB.12.0; Data
Source=c:\users\<name>\Documents\temp.accdb;".
12) The resultset object displays the column names using a For loop. The rows
are displayed using Sheet1.Range("A2").CopyFromRecordset rs.
Ex. No.: 97-A
Date: 19.06.2018
AIM: Checking whether given number is a prime number using VBA
PROCEDURE
1) Open MS Excel (Windows+R) to open run dialog, type “excel” and press
enter).
2) Click Developer Menu.
3) Choose Insert->User Form (Alt+I+U) from the menu.
4) Toolbox containing commonly used Graphical User
Interface (GUI) elements may be accessed using
View->Toolbox menu (Alt+V+X).
5) Insert 3 Labels, 1 TextBox and 1 CommandButton
resembling the user interface shown in figure.

211
6) Double click CommandButton1 and enter the following code:

Option Explicit
Private Sub CommandButton1_Click()
Dim i, n, x As Long
Dim prime As Boolean
prime = True
x = CLng(TextBox1.Text)
n=x/2
For i = 2 To n Step 1
If x Mod i = 0 Then
prime = False
End If
Next i
If prime Then
Label3.Caption = "Prime"
Else
Label3.Caption = "Not prime"
End If
End Sub
7) Run the program using Run->Run Sub/UserForm or by pressing F5.
8) Enter a number and check prime button.
9) The program displays whether given number is a prime number.
Ex. No.: 97-B
Date: 19.06.2018
AIM: Calculate a prime number just above the given number using VBA
PROCEDURE
1) Open MS Excel (Windows+R) to open run dialog, type “excel” and press
enter).
2) Click Developer Menu.
3) Choose Insert->User Form (Alt+I+U) from the menu.
4) Toolbox containing commonly used Graphical User
Interface (GUI) elements may be accessed using View-
>Toolbox menu (Alt+V+X).
5) Insert 3 Labels, 1 TextBox and 1 CommandButton
resembling the user interface shown in figure.
6) Double click CommandButton1 and enter the following
code:

Option Explicit

Private Function prime(x As Long)


Dim i, n As Long
212
prime = True
n=x/2
If x <= 3 Then
prime = True
Else
For i = 2 To n Step 1
If x Mod i = 0 Then
prime = False
End If
Next i
End If
End Function

Private Sub CommandButton1_Click()


Dim x As Long
x = CLng(TextBox1.Text)
Do Until prime(x)
x=x+1
Loop
Label3.Caption = x
End Sub

7) Run the program using Run->Run Sub/UserForm or by pressing F5.


8) Enter a number and check prime button.
9) The program displays the same number if it is prime or the next prime
number.
Ex. No.: 97-C
Date: 19.06.2018
AIM: Express given number in words using VBA
PROCEDURE
1) Open MS Excel (Windows+R) to open run dialog, type “excel” and press
enter).
2) Click Developer Menu.
3) Choose Insert->User Form (Alt+I+U) from the menu.
4) Toolbox containing commonly used Graphical User
Interface (GUI) elements may be accessed using
View->Toolbox menu (Alt+V+X).
5) Insert 3 Labels, 1 TextBox and 1 CommandButton
resembling the user interface shown in figure.
6) Double click CommandButton1 and enter the
following code:

Option Explicit
213
Private Function readDigit(x As Long, des As String) As String
If x = 0 Then
readDigit = ""
Else
Select Case x
Case 1: readDigit = " One " & des
Case 2: readDigit = " Two " & des
Case 3: readDigit = " Three " & des
Case 4: readDigit = " Four " & des
Case 5: readDigit = " Five " & des
Case 6: readDigit = " Six " & des
Case 7: readDigit = " Seven " & des
Case 8: readDigit = " Eight " & des
Case 9: readDigit = " Nine " & des
Case 10: readDigit = " Ten " & des
Case 11: readDigit = " Eleven " & des
Case 12: readDigit = " Twelve " & des
Case 13: readDigit = " Thirteen " & des
Case 14: readDigit = " Fourteen " & des
Case 15: readDigit = " Fifteen " & des
Case 16: readDigit = " Sixteen " & des
Case 17: readDigit = " Seventeen " & des
Case 18: readDigit = " Eighteen " & des
Case 19: readDigit = " Nineteen " & des
Case 20: readDigit = " Twenty " & des
Case 30: readDigit = " Thirty " & des
Case 40: readDigit = " Forty " & des
Case 50: readDigit = " Fifty " & des
Case 60: readDigit = " Sixty " & des
Case 70: readDigit = " Seventy " & des
Case 80: readDigit = " Eighty " & des
Case 90: readDigit = " Ninety " & des
Case Else:
readDigit = readDigit(CInt(x - x Mod 10), "") & readDigit(CInt(x Mod 10),
des)
End Select
End If
End Function

Private Sub CommandButton1_Click()


Dim x As Long
Dim res As String
214
x = CLng(TextBox1.Text)
Dim ten, hundred, thousand, lakh, crore As Long
ten = CLng(x Mod 100)
x = (x - x Mod 100) / 100
hundred = CLng(x Mod 10)
x = (x - x Mod 10) / 10
thousand = CLng(x Mod 100)
x = (x - x Mod 100) / 100
lakh = CLng(x Mod 100)
crore = CLng((x - x Mod 100) / 100)

res = readDigit(CLng(crore), " Crore ") & readDigit(CLng(lakh), " Lakh ") & _
readDigit(CLng(thousand), " Thousand ") & readDigit(CLng(hundred), "
Hundred ") & _
readDigit(CLng(ten), " ")

Label3.Caption = res
End Sub

7) Run the program using Run->Run Sub/UserForm or by pressing F5.


8) Enter a number and press Number in words button.
9) The program displays the same number if it is prime or the next prime
number.
Ex. No.: 98
Date: 28.05.2018
AIM: Installation of Tally ERP (Enterprise Resource Planning) 9
PROCEDURE:
1) Right click on the Tally ERP 9 Installer. Choose Run as Administrator.
2) Click Next button to install Tally ERP 9.
3) After completion of installation, right click on the Tally ERP 9 icon,
choose Run as Administrator.
4) Choose Activate License. Enter serial number, activation key, email ID of
Administrator and repeat the email ID of the administrator again.
5) When Tally ERP 9 complains about no Internet connection, choose to
continue activation in offline mode.
6) Reopen Tally ERP 9. It opens in fully activated mode.

Ex. No.: 99
Date: 29.05.2018
AIM: Creation of company using Tally ERP (Enterprise Resource Planning) 9
PROCEDURE:

215
1) Open Tally ERP 9. The opening screen, called Gateway of Tally is displayed.
2) Choose Create Company either by clicking on the menu or by pressing
down arrow and enter button or by pressing letter C in the keyboard.
3) Enter name of company (e.g., your name). Press Enter key.
4) Enter door number, street and locality of the company.
5) Select Puducherry State from the list of States provided on the right side
of Tally ERP 9.
6) Enter PIN code.
7) Enter phone/ mobile number and email ID.
8) Leave currency symbol at “Rs.”.
9) Choose to maintain accounts with inventory.
10) Set 01-04-2018 as the Financial year from. Set the same date for Books
beginning from.
11) Set security control if you desire to make your accounts to remain locked
to unauthorized persons.
12) When Tally ERP 9 displays Accept dialog, press Y to create new company.
13) Press F11 to Configure Tally ERP 9 to handle the company accounts. Enter
Y to use Debit/Credit note, use invoice mode for debit note and use
invoice mode for credit note.
14) Press Y when Tally ERP 9 displays Accept dialog.
15) Go back to Gateway of Tally ERP 9 by pressing “Esc” button.
16) Press Q in the Gateway to close Tally ERP 9.
Ex. No.: 100
Date: 29.05.2018
AIM: Creation, alteration and deletion of company in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Press F1 to create a new company.
3) Press Alt+F1 to shut a company. It can be reopened later.
4) Press Alt+F3 to display company info.
5) The menu for selection of company, creation of new company and
alteration of company is displayed.
6) Choose Alter. Select the company to be altered. Press Enter.
7) Any details about the company may be altered and saved.
8) If you wish to delete a company, press Alt+D.
9) Press Y or enter key to confirm deletion. Press N or Esc key to cancel
deletion request.
Ex. No.: 101
Date: 29.05.2018
AIM: Setting Features and Configuring company in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.

216
2) Choose the company for which accounting is required (F1).
3) Press F11.
4) Select Accounting Features.
5) Say Yes to Integrated Account and Inventory, Maintain Payroll, Allow
Invoicing, Enter Purchase in Invoice Format, Use Debit/Credit Note, Use
invoice mode for Credit Notes, Use Invoice mode for Debit Notes, Enable
cheque printing.
6) Choose No to all other values.
7) Press Y when Accept message appears.
8) Choose Inventory Features from Company Features menu.
9) Choose Yes against Integrated Accounts and Inventory, Allow Purchase
Order Processing, Allow Sales Order Processing, Allow Invoicing, Enter
Purchase Invoice Format, Use Debit/Credit notes, Use Invoice mode for
Debit Notes, Use Invoice mode for Debit Notes.
10) Choose No against all other items.
11) Go to Gateway of Tally ERP 9. Press F12 to configure.
12) Select Voucher Entry. Choose Yes to all items.
Ex. No.: 102
Date: 29.05.2018
AIM: Creating Units of Measure in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose Inventory Info from the Gateway of Tally ERP 9.
3) Choose Units of Measure (or Press U).
4) Choose Create (or press C).
5) Enter “No.” against symbol.
6) Enter “Number” against formal name.
7) Enter 0 against decimal places.
8) You could add any symbol (like kg, m with formal name kilogram, metre,
etc. with units of measure having 2 or 3 decimal places).
9) Press Y to accept the unit creation.
Ex. No.: 103
Date: 30.06.2017
AIM: Creating Stock Groups in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose Inventory Info from the Gateway of Tally ERP 9.
3) Choose Stock Groups (or Press G).
4) Choose Create (or press C).
5) In the Group creation screen, enter the major group name (Create Laptop,
Desktop and Mobile groups).
6) Choose creation of group under Primary.

217
7) Press Y against Can quantities of items be added?
8) When you press Enter again, an Accept message appears. Choose Y.
9) To create multiple stock groups from a single menu, choose Create under
Multiple Stock Groups.
10) Choose All Items under Group.
11) Enter Mobile against name of stock group. Choose to create group
under Primary. Press Y against Items are addable?.
12) Press blank enter and choose Y to accept the changes.

Ex. No.: 104


Date: 30.05.2018
AIM: Creating Stock Items in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose Inventory Info from the Gateway of Tally ERP 9.
3) Choose Stock Items (or Press I).
4) Choose Create (or press C).
5) Enter HP Pavilion as the name of item.
6) Create the following items under the groups Laptop, Desktop and Mobile:
a. Laptop iv. Apple Mac
i. HP Pavilion Desktop
ii. Acer Aspire c. Mobile
iii. Apple Macbook i. Apple iPhone X
Pro ii. Apple iPhone 8
iv. Apple Macbook iii. Apple iPhone 7
Air iv. Samsung Galaxy
v. Lenovo ideapad Note
vi. HP Netbook v. Samsung Galaxy
b. Desktop S8
i. Lenovo Desktop vi. Samsung Galaxy
ii. Acer Desktop C9
iii. HP Desktop
vii.
7) Choose No. as the unit of measure against each item.
8) You could use the Multiple item creation screen to easily create the stock
items.
9) Press blank enter at the end of list in Multiple Items and choose Y to
accept the changes.
Ex. No.: 105
Date: 30.05.2018
AIM: Creating capital investment ledger in Tally ERP 9
PROCEDURE:

218
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) From Gateway of Tally (GoT), choose Accounts Info -> Ledgers -> Create.
4) Enter name of the investors.
5) Choose “Capital Account” for the accounts group under which this ledger
is created.
6) Enter opening balance, as applicable to create an investment matrix as
shown below:
Opening
Sl. Name of
credit
No. capital account
(Rs.)
1 Mr.X 0
2 Mr.Y 3,00,000
3 Mr.Z 2,00,000

Ex. No.: 106


Date: 30.05.2018
AIM: Creating bank account in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) From Gateway of Tally (GoT), choose Accounts Info -> Ledgers -> Create.
4) Enter name of your bank account (say ICICI).
5) Choose “Bank Accounts” for the accounts group under which this ledger
is created.
6) Similarly, create ledgerledgers named HDFC and ICICI-Loan under Bank
accounts for loan transactions.

Ex. No.: 107


Date: 30.05.2018
AIM: Creating receipt voucher entry in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) From Gateway of Tally (GoT), choose Accounting Vouchers. Choose
Receipt (Press F6) from the right side panel.
4) Enter date of receipt.
5) Choose receipt account (Cash) under “Account”. This is the debit account.
6) Choose the name of person offering this credit (your parent) under
“Particulars”.

219
7) Enter the amount offered by the creditor (your parent) under “Amount”
(say 10,00,000).”. Create the following investment data:

Sl. Credit Amount


Debit Account
No. Account (Rs.)
1 Cash Mr.X 1,50,000
2 Cash Mr.Y 2,60,000
3 Cash Mr.Z 1,70,000
8) Press Enter to reach Narration. Enter any description about the
transaction in narration.
9) Press Enter to finish receipt voucher entry.
10) Press Y to accept the receipt voucher entries.
11) Open GoT -> Display -> Day Book. Verify that the amount is
displayed under Credit part of the day book.
12) You can edit the voucher values by pressing Enter key by placing
the cursor on given row of transaction.

Ex. No.: 108


Date: 30.05.2018
AIM: Creating Payment Voucher in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) From Gateway of Tally (GoT), choose Accounting Vouchers. Choose
Payment (Press F5) from the right side panel.
4) Enter date of payment.
5) Choose Credit account (Cash) under “Account”.
6) Under “Particulars”, choose the ledger to which this payment is made (say
Mr.X).
7) Enter the amount paid (Say 40,000). Make cash repayments as shown
below:
Sl. Credit Amount
Debit Account
No. Account (Rs.)
1 Mr.X Cash 40,000
2 Mr.Y Cash 60,000
3 Mr.Z Cash 35,000
8) Press Enter to reach Narration. Enter any description about the
transaction in narration.
9) Press Enter to finish payment voucher entry.
220
10) Press Y to accept the payment voucher entries.
11) Open GoT -> Display -> Day Book. Verify that the amount is
displayed under Credit part of the day book.
12) You can edit the voucher values by pressing Enter key by placing
the cursor on given row of transaction.
Ex. No.: 109
Date: 30.05.2018
AIM: Making cash deposits into bank account using Contra Voucher in Tally ERP
9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) From Gateway of Tally (GoT), choose Accounting Vouchers. Choose
“Contra” (Press F4) from the right side panel.
4) Enter voucher date.
5) Select the Debit ledger (SBI) under Account (Money is deposited to this
ledger). Press Enter.
6) Select Credit ledger (Cash) under Particulars. Money is taken out from this
ledger.
7) Enter the amount deposited from Cash account to SBI under “Amount”
(Say Rs.2,50,000/-). Make the following deposit transactions:
Sl. Debit Credit Amount
Date
No. Account Account (Rs.)
1 2-4-2018 SBI Cash 3,50,000
2 7-4-2018 HDFC Cash 2,50,000
3 12-4-2018 SBI Cash 2,00,000
8) To check bank account balance, choose GoT->Display->Account Books-
>Cash/Bank Book(s). The amount of deposits (debits in contra) and
withdrawals (credits in contra) should match.
Ex. No.: 110
Date: 30.05.2018
AIM: Making cash withdrawal from bank account using Contra Voucher in Tally
ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) From Gateway of Tally (GoT), choose Accounting Vouchers. Choose
“Contra” (Press F4) from the right side panel.
4) Enter voucher date.
5) If there is any withdrawal from the bank account (SBI), choose Contra (F4),
select Cash under accounts, SBI under particulars. Enter the withdrawal

221
amount and press Enter. Create withdrawal transactions for data given
below:

Sl. Debit Credit Amount


Date
No. Account Account (Rs.)
1 17-4-2018 Cash SBI 75,000
2 5-5-2018 Cash SBI 20,000
3 8-5-2018 Cash HDFC 80,000
6) To check bank account balance, choose GoT->Display->Account Books-
>Cash/Bank Book(s). The amount of deposits (debits in contra) and
withdrawals (credits in contra) should match.
Ex. No.: 111
Date: 30.05.2018
AIM: Accounting for loans and repayments using Contra Voucher in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) From Gateway of Tally (GoT), choose Accounting Vouchers. Choose
“Contra” (Press F4) from the right side panel.
4) Enter voucher date.
5) If a loan (say Rs.2,00,000) is taken from a bank (say ICICI-Loan), and the
same is received in Cash, choose Contra (F4), select Cash under Accounts
(debit ledger), ICICI-Loan under particulars and enter 2,00,000 under
Amount.
6) If a loan (say Rs.3,00,000) is taken from a bank (say ICICI-Loan), and the
same is deposited in SBI, choose Contra (F4), select SBI under Accounts
(debit ledger), ICICI-Loan under particulars and enter 3,00,000 under
Amount.
7) If a repayment of EMI (say Rs.35,000/-) is made from HDFC to ICICI-Loan,
select Contra (F4), select ICICI-Loan under Accounts (debit ledger), HDFC
under particulars and enter Rs.35,000 under Amount.
8) Create the following loan transactions:
Sl. Debit Credit Amount
Date
No. Account Account (Rs.)
1 20-4- Cash ICICI-Loan 2,00,000
2018
2 24-4- SBI ICICI-Loan 3,00,000
2018
3 28-4- HDFC ICICI-Loan 1,90,000
2018
5 1-5-2018 ICICI-Loan SBI 35,000

222
Ex. No.: 112
Date: 01.07.2018
AIM: Creating multiple Godowns using Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) From Gateway of Tally (GoT), Press F11 to configure Accounting info.
4) Choose Inventory.
5) Press Yes against Maintain multiple Godown.
6) Press Enter against all other items and accept the changes by pressing Y
when prompted.
7) To create a Godown, press Alt+F3 (Company Info), choose Inventory-
>Godowns.
8) A default godown named Main Godown is available by default.
9) Create Godowns named Gandhi Road and Muthialpet under Primary
category.
Ex. No.: 113
Date: 01.07.2018
AIM: Creating Purchase ledger and Supplier Ledger in Tally ERP 9
PROCEDURE:
10) Open Tally ERP 9.
11) Choose your company if it is not already opened.
12) From Gateway of Tally (GoT), choose GoT ->Accounts Info->
Ledgers -> Create.
13) Enter name of the purchase ledger.
14) Choose “Purchase accounts” for the accounts group under which
this ledger is created.
15) Enter name of the supplier ledger.
16) Choose “Sundry Creditor” for the accounts group under which this
ledger is created.
17) Create the following list of Purchase ledgers and Supply ledgers.
Sl. Sl.
Purchase ledger Supplier ledger
No. No.
1 Local purchase 1 Tower mobiles
2 National purchase 2 Digitech computers
3 Global purchase 3 Neo-devices

Ex. No.: 114


Date: 01.07.2018
AIM: Making Purchase Voucher entry in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
223
2) Choose your company if it is not already opened.
3) From Gateway of Tally (GoT), choose GoT ->Accounting Vouchers. Select
Purchase Voucher (F9).
4) Enter purchase reference number.
5) Select Supplier Ledger. Enter order reference details in the submenu.
6) Select Local Purchase for Purchase Ledger.
7) Select the item to be purchased from the list of items. Enter order No.,
Due date, select Main Godown, Quantity, Rate of purchase. Press Y to
accept the Voucher entry.
8) Open GoT->Stock Summary. Verify that the number of items in stock is
displayed.
9) Open GoT->Balance Sheet. Verify that the purchase amount is displayed
against current liabilities.
10) Make purchase transactions for the following items:
No. Date Supplier Purchase Item Godown Quantity Rate
Ledger
1 12- Neo- Local Apple Main 700 75,000
05- Mobiles Purchase iPhone Storage
2018 X
2 12- Tower Local Apple Muthialpet 300 55,000
05- mobiles Purchase iPhone
2018 8
3 12- Digitech Local HP Gandhi 400 36,000
05- computers Purchase Laptop Road
2018
11) Open Balance Sheet and Stock and Stock Summary to confirm that
the effect of purchase transactions are correctly reflected.

Ex. No.: 115


Date: 01.07.2018
AIM: Creating Sales Ledger and Buyer in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) From Gateway of Tally (GoT), choose GoT ->Accounts Info-> Ledgers ->
Create.
4) Enter name of the Sales ledger (say Local Sales).
5) Choose “Sales accounts” for the accounts group under which this ledger
is created.
6) Enter name of the Buyer ledger.
7) Choose “Sundry Debtor” for the accounts group under which this ledger
is created.

224
8) Press Enter to finish receipt voucher entry.
9) Press Y to accept the receipt voucher entries.
Sl. Sl.
Sales ledger Buyer ledger
No. No.
1 Local Sales 1 Excellent computer
point
2 National Sales 2 Thiru computers
3 Global Sales 3 Indica computers

Ex. No.: 116


Date: 01.07.2018
AIM: Making Sales Voucher entry in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) From Gateway of Tally (GoT), choose GoT ->Accounting Vouchers. Select
Sales Voucher (F8).
4) Enter sales reference number.
5) Select Buyer Ledger (say Excellents). Enter order reference details in the
submenu.
6) Select Local Sales under Sales Ledger.
7) Select the item to be sold from the list of items. Enter order No., Due date,
select Main Godown, Quantity (say 100), Rate of sale (say 1,00,000/-).
Press Y to accept the Voucher entry.
8) Open GoT->Balance Sheet. Verify that the sale of the items is reflected in
the monetary balance of the company.
9) Open Profit & Loss Account, stock status and balance sheet to check the
status of company.
No. Date Buyer Sales Item Godown Quantity Rate
Ledger
1 12- Excellent Local Apple Main 600 1,25,000
05- computer Sales iPhone Storage
2018 point X
2 12- Indica Local Apple Muthialpet 250 84,000
05- computer Sales iPhone
2018 8
3 12- Thiru Local HP Gandhi 250 48,000
05- computers Sales Laptop Road
2018
4 16- Indica Local Apple Main 100 1,35,000
05- computer Sales iPhone Storage
2018 X
225
Ex. No.: 117
Date: 01.07.2018
AIM: Making Payment Voucher entry for Purchase liability in Tally ERP 9
PROCEDURE:
1) The items purchased through Purchase voucher create an unsettled
liability for the amount of purchase.
2) Suitable Payment Voucher entry should be made to square off the
liability.
3) Open Tally ERP 9.
4) Choose your company if it is not already opened.
5) From Gateway of Tally (GoT), choose GoT ->Balance Sheet. Look at
Current Liabilities. Press Enter on the row containing current liabilities.
Press Enter again to see the Sundry creditor name and outstanding
amount. Note down the amount.
6) From Gateway of Tally (GoT), choose GoT ->Accounting Vouchers. Select
Payment Voucher (F5).
7) Select Cash against Account, Name of creditor (say Neo-mobiles) against
Particulars and enter amount (Say Rs.5,25,00,000).
8) Press Y to accept the payment voucher entry.
9) Open Balance Sheet again (GoT->Balance Sheet) and verify that the
current liabilities are reduced by the amount paid to the supplier.
10) Make the following payment entries and verify the balance sheet
for any liabilities to suppliers:
Sl. Date Credit Amount
Debit Account
No. Account (Rs.)
1 27.05.2018 Neo-Mobiles Cash 3,75,00,000
2 27.05.2018 Tower Mobiles Cash 1,65,00,000
3 28.05.2018 Digitech Cash 1,44,00,000
computers
4 30.05.2018 Neo-Mobiles Cash 1,50,00,000
11) After making transaction entries, verify that the day books for
27.05.2018, 28.05.2018 and 30.05.2018 reflect the transactions and that
balance sheet shows no liabilities to suppliers.
Ex. No.: 118
Date: 01.07.2018
AIM: Creating POS (Point Of Sale) Voucher in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
1) From Gateway of Tally (GoT), choose GoT ->Accounts Info->Voucher
Types->Create.
226
2) Enter POS Voucher against name, choose Sale against under, accept
default values for other parameters and press Y to create POS Voucher.
3) To make a sales entry using POS Voucher, open GoT->Accounting
Vouchers.
4) Press F8. Select POS Voucher.
5) Choose a buyer, enter delivery note details, select Local Sales against
Sales Ledger.
6) Choose name of item under Particulars, enter delivery details, choose
Godown, enter number and rate.
7) Enter the following transaction details:
No. Date Buyer Sales Item Godown Quantity Rate
Ledger
1 14- Indica Local Apple Main 100 1,45,000
05- Computers Sales iPhone Storage
2018 X
2 14- Indica Local Apple Muthialpet 50 90,000
05- computer Sales iPhone
2018 8
3 15- Thiru Local HP Gandhi 150 55,000
05- computers Sales Laptop Road
2018

8) Open Balance Sheet and Stock and Stock Summary to confirm that the
effect of POS Voucher is the same as that of Sales Voucher.
Ex. No.: 119
Date: 01.07.2018
AIM: Change Language in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Press Alt+G. Choose preferred language.
3) Verify that Tally software begins to work in the chosen language.

Ex. No.: 120


Date: 06.06.2018
AIM: Creating Employee Groups in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) Press Alt+F11 to configure features of the company. Choose “Accounting
features” from Company features menu.
4) Ensure that “Maintain Payroll” is marked “Yes”.
5) Press Escape and move to Gateway of Tally.
227
6) Select “Payroll Info”. Choose “Employee Groups”.
7) Create 2 groups named “Manager” and “Sales Person”.
Sl.
Employee Group Under
No.
1 Manager Primary
2 Sales Person Primary
8) Take screenshot of the screen presented when choosing GoT=>Employee
Groups=>Display.
Ex. No.: 121
Date: 06.06.2018
AIM: Creating employees in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) Select “Payroll Info”.
4) Choose “Employees”.
5) Choose “Create” under Employees menu.
6) Enter name (say “XX”). Choose “Manager” in the group. Enter date of
joining. Enter sequence number of employee (101), designation (Manager
(Sales)), function (sales), location (Puducherry), date of birth, blood
group, father/mother name, spouse name, address, contact numbers,
email ID, Bank name, branch and account number. Choose Y to accept.
7) Create another employee named “YY and ZZ”. Select “Sales Person” as the
group under which employee is created. Choose Y to create the
employee.
Under Designation Gender
Sl. Employee
Employee employee
No. ID
Group
1 XX Manager 1 Manager Female
2 YY Sales Person 2 Sales Female
Person
3 ZZ Sales Person 3 Sales Male
Person

8) Take screenshot of the screen presented when choosing


GoT=>Employees=>Display.
Ex. No.: 122
Date: 06.06.2018
AIM: Creating Units of Work, Attendance/ Production types in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
228
3)
Select “Payroll Info”, “Units (Work)”.
4)
Enter “D” for symbol, Day for unit. Press Y to accept.
5)
Choose “Attendance/ Production Types” from Payroll Info.
6)
Enter “Attendance” against Name, Primary as the group, Choose
Attendance/ Leave with Pay against Attendance Type.
7) Choose Days against period type.
Ex. No.: 123
Date: 06.06.2018
AIM: Creating Pay Heads in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) Select “Payroll Info”, “Pay Heads”. Choose “Create” under Pay Heads.
4) Enter “Basic” against name. Select “Not Applicable”. Choose “Yes” against
Affect Net Salary.
5) Create Pay Heads named DA and EPF and ESI.
Sl. Sala Pay Head Under Aff Na Use Calculat Attend Calcu Formula
N ry Type ect me for ion type ance/ latio
o. hea s in Grat Leave n
d net pay uity with perio
Sal slip pay d
ary
1 Basi Earnings Indirect Yes Bas Yes On Day Days
c for expense ic Attenda
Employee nce
2 DA Earnings Indirect Yes DA No As - Mon On
for expense comput ths Specified
Employee ed value Formula -
5% of basic
3 EPF Employee’s Current Yes EPF - As - Mon On
statutory liabilitie comput ths Specified
deduction s ed value Formula -
12% of
basic from
0 to 6500
780 for
basic
above
6500
4 ESI Employee’s Current Yes ESI - As - Mon On
statutory liabilitie comput ths Specified
deduction s ed value Formula -
1.75% of
basic

6) Choose to calculate DA and PF as a percentage of the basic pay (or leave


as a manually calculated pay component).

229
Ex. No.: 124
Date: 06.06.2018
AIM: Creating Salary Details in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) Select “Payroll Info”, “Salary Details”. Choose “Create” under Salary
Details.
4) Select Manager Category. Choose Basic. Set 300 per day. Leave DA and PF
without change (these amounts will be calculated as a percentage of basic
pay).
5) Select Sales Person category. Choose Basic. Set 200 per day. Leave DA and
PF without change (these amounts will be calculated as a percentage of
basic pay).
6) Then choose XX. Tally ERP 9 asks whether to copy values from the group.
Choose to copy values. Press blank enter till the changes are accepted.
7) Then choose YY and ZZ. Tally ERP 9 asks whether to copy values from the
group. Choose to copy values. Press blank enter till the changes are
accepted.
Sl. Employee group Wage
No. / Day
1 Manager 300
2 Sales Person 200

Ex. No.: 125


Date: 07.06.2017
AIM: Entering attendance Details in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) Select “Payroll Info”, “Payroll Vouchers”.
4) Press Ctrl+F5 to create an Attendance Voucher.
5) Choose name of employee. Enter number of days of attendance (Say 30).
6) Close each menu and come back to GoT (Gateway of Tally).
Ex. No.: 126
Date: 07.06.2018
AIM: Salary payment in Tally ERP 9
PROCEDURE:
230
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) Select “Payroll Vouchers” under Transactions.
4) Press Ctrl+F4 to create a Payroll Voucher.
5) Choose Cash account.
6) Choose employee. Enter salary.
7) Press Y to accept the salary payment.
8) Close each menu and come back to GoT (Gateway of Tally).

Ex. No.: 127


Date: 07.06.2018
AIM: Payment of electricity and water bills in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) Select Accounts Info=>Ledgers=>Electricity Bill.
4) Choose Direct expense since if electricity is needed for production.
5) Select Accounts Info=>Ledgers=>Water Bill.
6) Choose Indirect expense against account type.
7) From Gateway of Tally, choose accounting vouchers.
8) Choose Payment voucher.
9) Make payment of Rs.5,300/- to electricity bill.
10) Make payment of Rs.2,000/- towards water bill.
11) Open daybook and verify the transaction.
Ex. No.: 128
Date: 11.06.2018
AIM: Creating Budget in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) From Gateway of Tally (GoT), choose GoT ->Accounts Info-> Budgets ->
Create.
4) Enter name of the budget ledger (say Local Purchase).
5) Choose Primary group.
6) Enter start date, end date. Choose which groups or ledgers are brought
under budget control. You may choose an entire group or a single ledger to
fall under budget control.
7) Choose the ledger name, whether budget is applicable Closing Balance
(default) or Nett Transactions and enter the budget amount. Now the
budget limit has been set.

231
8) To view the progress of actual expenditure compared to budget limit, choose
GoT->Display->Trial Balance. Press Alt+B for budget. Select the budget and
compare the progress against the budget.
Ex. No.: 129
Date: 11.06.2018
AIM: Creating Scenario in Tally ERP 9
PROCEDURE:
1) Open Tally ERP 9.
2) Choose your company if it is not already opened.
3) From Gateway of Tally (GoT), choose GoT ->Accounts Info-> Scenarios ->
Create.
4) Enter name of the scenario ledger (say Salary Scenario).
5) Choose Yes against include actual.
6) Choose Reversing Journal under include list. Choose End of List against
exclude list.
7) Accept the changes. Scenario has been created.
8) Open GoT->Accounting Vouchers. Press F10. Make a Reversing Journal
Entry (a set of Credit and Debit).
9) To compare the actual situation against scenario, choose GoT->Display-
>Trial Balance. Press Alt+C for Add column. Select the scenario column and
compare the same against the actual condition.
Ex. No.: 130
Date: 11.06.2018
AIM: Registering in e-Commerce website www.amazon.in
PROCEDURE:
1) Open browser.
2) Enter the URL www.amazon.in.
3) Enter your name.
4) Enter your mobile number.
5) Enter your email ID (optional). You may choose not to enter your email ID.
6) Enter a password and remember the same.
7) Press Create button and the new user ID is created in www.amazon.in.
Ex. No.: 131
Date: 12.06.2018
AIM: Searching and adding items to the cart in an e-Commerce platform.
PROCEDURE:
1) Open browser.
2) Enter the URL www.amazon.in
3) Search for a product (say watch).
4) Select an item from the listed ones.
5) Click Add to Cart to permit the item to be added to the electronic cart.
6) Search, select and add other items to the cart.

232
7) Click the cart icon (top right corner) and see whether all the items have
been added to the cart.
Ex. No.: 132
Date: 11.06.2018
AIM: Checking out cart items from an e-Commerce portal (www.amazon.in)
PROCEDURE:
1) Open browser.
2) Enter the URL www.amazon.in
3) Log in to your account.
4) Click on the cart icon.
5) Verify the items, rates and the total amount.
6) Press Proceed to checkout button.
7) Add or alter the address for delivery.
8) Choose your mode of payment (It may be COD, Credit card, Debit card,
netbanking or wallet).
9) Proceed to make the payment. In case of credit/debit card payment, enter
the card number, validity month and year, name of card holder and the
CVV/ CVN.
10) In case of netbanking choose the bank, enter user ID and password.
11) In case of wallet, choose the wallet operator, enter ID and Password.
12) Enter OTP (One Time Password) to complete the transaction.
Ex. No.: 133
Date: 14.06.2018
AIM: Registering in e-market place (www.ebay.in)
PROCEDURE:
1) Open browser.
2) Enter the URL www.ebay.in and wait till the webpage loads.
3) Click register from the top left corner of the web page. Registration form
is loaded.
4) Enter first name (your name), last name (family name), Email address and
a password for logging into www.ebay.in.
5) Press the Register button.
6) The web page loads with your new login details.

Ex. No.: 134


Date: 14.06.2018
AIM: Searching and loading an item to cart on www.ebay.in
PROCEDURE:
1) Open browser.
2) Enter the URL www.ebay.in and wait till the homepage loads.
3) Choose Sign in from top left corner of the eBay home page.
4) Enter your login ID (email ID) and password.

233
5) In the search box, enter the name of item you are looking for. Choose
category of the item from the drop down list available on the right side
(optional).
6) The list of items matching the search string is displayed.
7) Using the Sort options available at the top of the list, items may be sorted
in the order of ending soon, price+shipping lowest first, price+shipping
highest first, etc.
8) Choose an item that matches the specification requirement within a
reasonable price range.
9) Click on the item and have a detailed look at the photos and
specifications of the item.
10) Ebay supports 2 forms for selling items: (1) Buy it now, (2) Place bid.
11) Items listed under Buy it now option may be added to cart right away.
12) Items listed under Place bid category require one to place a higher price
bid till reserve price and listing timeline are met. At the end of bidding,
one may win an item or may not.
13) Once an item has been added to cart, one may start to place order.
Ex. No.: 135
Date: 14.06.2018
AIM: Making payment, tracking delivery and providing feedback for an
eCommerce transaction on www.ebay.in
PROCEDURE:
1) Open browser.
2) Enter the URL www.ebay.in and wait till the homepage loads.
3) Click on the cart. The item chosen for purchase appears in the cart.
4) In case address for your ID has not been provided, enter the address
details and mobile number in the next screen.
5) Make the above address the default delivery address.
6) Payment screen appears. Choose the mode of payment from the
following options: (1) Credit card (may have EMI – Equated Monthly
Installment option), (2) Debit card, (3) Netbanking, (4) Wallet, (5) COD
(Cash on Delivery).
7) On completing the payment, the item is added to purchase list.
8) Order confirmation data is sent to the registered email ID and mobile
number.
9) Shipment details are furnished when the item gets shipped by the seller.
10) Current location of the item may be tracked using the shipment details
furnished by the seller.
11) When the item arrives, the buyer may have to confirm receipt of the
item.
12) The buyer may provide a feedback on the quality of the item, shipping
speed and along with a personal comment to complete the transaction.

234

S-ar putea să vă placă și