WEB - Record - 6th Sem

VISVESVARAYA TECHNOLOGICAL UNIVERSITY
Jnana Sangama, Belgaum-590018
WEB TECHNOLOGY
AND ITS APPLICATIONS
Practical Assessment Record
By
SOUMYA RANJAN DAS(1CR20CS188)
SECTION C
Dept. of CSE, CMRIT
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CMR INSTITUTE OF TECHNOLOGY
#132, AECS LAYOUT, IT PARK ROAD, KUNDALAHALLI, BANGALORE-560037
WEB TECHNOLOGY AND ITS APPLICATIONS

Practical Assessment Record
1
WEB TECHNOLOGY Practical Assessment
EVALUATION
Course Duration: 20th March- 2023 to 10th July 2023
Name: SOUMYA RANJAN DAS

USN: 1CR20CS188
Section: C
Date of Submission: 26/06/2023
Final Marks Obtained: _____/20
Signature of Faculty:
Faculty In charge:
Anil D,
Assistant Professor
Dept of CSE, CMRIT
Prescribed List of Programs

Sl Date Program Name Marks Signature
No (15)
Page 2 of 39
1 05/05/23 Write a JavaScript to design a simple calculator to perform

the following operations: sum, product, difference and
quotient.
2 31/03/23 Write a JavaScript that calculates the squares and cubes of
the numbers from 0 to 10and outputs HTML text that
displays the resulting values in an HTML table format.
3 02/06/23 Write a JavaScript code that displays text “TEXT-
GROWING” with increasing font size in the interval of
100ms in RED COLOR, when the font size reaches 50pt it
displays “TEXT-SHRINKING” in BLUE color. Then the
font size decreases to 5pt.
4 13/05/23 Develop and demonstrate a HTML5 file that includes

JavaScript script that uses functions for the following
problems:
1. Parameter: A string
2. Output: The position in the string of the left-most
vowel
3. Parameter: A number
4. Output: The number with its digits in the reverse
order
5 24/03/23 Design an XML document to store information about a

student in an engineering college affiliated to VTU. The
information must include USN, Name, and Name of the
College, Branch, Year of Joining, and email id. Makeup
sample data for 3 students. Create a CSS style sheet and use
it to display the document.
6 02/06/23 Write a PHP program to keep track of the number of visitors
visiting the web page and to display this count of visitors,
with proper headings.
7 02/06/23 Write a PHP program to display a digital clock which
displays the current time of the server.
8 19/06/23 Write the PHP programs to do the following:

1. Implement simple calculator operations.
2. Find the transpose of a matrix.
3. Multiplication of two matrices.
4. Addition of two matrices.
Page 3 of 39
9 19/06/23 Write a PHP program named states.py that declares a

variable states with value “Mississippi Alabama Texas
Massachusetts Kansas". write a PHP program that does the
following:
1. Search for a word in variable states that ends in
xas. Store this word in element0 of a list named
states List.
2. Search for a word in states that begins with k
and ends in s. Perform a case-insensitive
comparison. [Note: Passing re.Ias a second
parameter to method compile performs a case-
insensitive comparison.] Store this word in
element1 of states List.
3. Search for a word in states that begins with M
and ends in s. Store this word in element 2 of the
list.
4. Search for a word in states that ends in a. Store
this word in element 3 of the list.
10 23/06/23 Write a PHP program to sort the student records which are
stored in the database using selection sort.
Total: ____/150
Avg(20): _____/20
Program 1: Write a JavaScript to design a simple calculator to perform the following

operations: sum, product, difference and quotient.
Program:
Page 4 of 39
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>SOUMYA RANJAN DAS 1CR20CS188</h1>
<div class="calculator">
<input type="text" id="input">
<div class="keypad">
<button onclick="appendToInput('1')">1</button>
<button onclick="appendToInput('+')">+</button>
<button onclick="appendToInput('-')">-</button>
Page 5 of 39
<button onclick="appendToInput('*')">×</button>
<button onclick="appendToInput('.')">.</button>
<button onclick="clearInput()">C</button>
<button onclick="calculate()">=</button>
<button onclick="appendToInput('/')">÷</button>
</div>
</div>
<script src="sam.js"></script></body>
</html>
JAVASCRIPT:
let input = document.getElementById("input");
function appendToInput(value) {
input.value += value;
function clearInput() {
input.value = "";
function calculate() {
try {
Page 6 of 39
input.value = eval(input.value);
} catch (error) {
input.value = "Error";
CSS:
.calculator {
width: 200px;
margin: 0 auto;
text-align: center;
input {
width: 100%;
margin-bottom: 10px;
font-size: 24px;
text-align: right;
padding: 5px;
button {
width: 50px;
height: 50px;
Page 7 of 39
font-size: 24px;
border: none;
outline: none;
background-color: #eee;
margin: 5px;
cursor: pointer;
button:hover {
background-color: #ddd;
.keypad {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
h1 {text-align: center;
Output:
Page 8 of 39
Program 2: Write a JavaScript that calculates the squares and cubes of the numbers from 0 to
10 and outputs HTML text that displays the resulting values in an HTML table format.
Page 9 of 39
Program:
<script>
document.write("<h1>soumya ranjan das, 1CR20CS188</h1>")
document.write("<h1>Square and cube of Numbers from 0 to 10<h1>")
document.write( "<table><tr><th>Number</th><th>Square</th><th>Cube</th></tr>")
for(var i=0;i<=10;i++){
document.write("<tr><td> "+ i +" </td><td>"+ i*i + "</td><td>"+i*i*i+"</td></tr>")
document.write("</table")
</script>
Output:
Program 3: Write a JavaScript code that displays text “TEXT-GROWING” with

increasing font size in the interval of 100ms in RED COLOR, when the font size
Page 10 of 39
reaches50pt it displays “TEXT-SHRINKING” in BLUE color. Then the font size decreases
to 5pt.
Program:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Text Animation</title>
</head>
<body>
<div id="text">TEXT-GROWING</div>
<script src="script.js"></script>
</body>
</html>
JAVASCRIPT:
function displayText() {
let fontSize = 1;
let growing = true;
const textElement = document.getElementById("text");
setInterval(() => {
if (growing) {
fontSize++;
textElement.style.fontSize = fontSize + "pt";
Page 11 of 39
textElement.style.color = "red";
if (fontSize === 50) {
growing = false;
textElement.innerText = "TEXT-SHRINKING";
textElement.style.color = "blue";
} else {
fontSize--;
textElement.style.fontSize = fontSize + "pt";if (fontSize === 5) {
growing = true;
textElement.innerText = "TEXT-GROWING";
textElement.style.color = "red";
}, 100);
displayText()
Output:
Page 12 of 39
Page 13 of 39
Program 4: Develop and demonstrate a HTML5 file that includes JavaScript script that
uses functions for the following problems:
 Parameter: A string
Page 14 of 39
 Output: The position in the string of the left-most vowel
 Parameter: A number

Output: The number with its digits in the reverse order
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Program 4</title>
<script>
function lmv(){
var str=prompt("Enter the string","hello");
document.write("The String is "+str+"<br>");
str=str.toUpperCase();
var i,ch="";
for(i=0;i<str.length;i++){
ch=str.charAt(i);
if(ch=="A" || ch=="E" || ch=="I" || ch=="O" || ch=="U") break;
if(i<str.length) document.write("The left most vowel is at position :"+(i+1));
else document.write("No vowel found");
function rev_num(){
Page 15 of 39
var num=prompt("Enter the Number","");
var n=num;
var rev=0,rem;
while(n>0){
rem=n%10;
rev=rev*10+rem;
n=Math.floor(n/10);
document.write("The given number is :"+num+"<br>The reversed number is :"+rev );}
</script>
</head>
<body style="pad: 20px;">
<div style="padding: 20px;">
<input type="button" value="left Most vowel" onclick="lmv()">
<input type="button" value="Reverse a number" onclick="rev_num()">
</div>
</body>
</html>
Output:
Page 16 of 39
Program 5: Design an XML document to store information about a student in an

engineering college affiliated to VTU. The information must include USN, Name, and
Page 17 of 39
Name of the College, Branch, Year of Joining, and email id. Makeup sample data for 3
students. Create a CSS style sheet and use it to display the document.
Program code:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<studentdata>
<header>
<Name>NAME: SOUMYA RANJAN DAS</Name>
<Usn>USN: 1CR20CS188</Usn>
</header>
<students>
<student1>
<h1>STUDENT1 DETAILS</h1>
<name>NAME: SOUMYA RANJAN DAS</name>
<usn>USN: 1CR20CS188</usn>
<college>COLLEGE: CMRIT</college>
<branch>BRANCH: CSE </branch>
<yoj>YEAR OF JOINING: 2020</yoj>
<email>EMAIL: [email protected]</email>
</student1>
<student2>
<name>NAME: BHARATH</name>
<usn>USN: 1CR20CS201</usn>
Page 18 of 39
<branch>BRANCH: CSE </branch>
</student2>
<student3>
<name>NAME: Anika N</name>
<usn>USN: 1CR20IS179</usn>
<branch>BRANCH: ISE </branch>
</student3>
</students>
</studentdata>
CSS:
*{
display: block;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
margin-top: 7px;
header {
font-size: 20px;
Page 19 of 39
color: brown;
padding-left: 30%;
font-weight: 600;
students {
color: rgb(13, 13, 186);
padding-left: 20px;
font-size: 18px;
h1 {
color: #191f1d;
font-weight: bolder;
font-size: 110%;
padding-bottom: 3px;
padding-top: -10px;
student2 {
margin-top: 30px;
student3 {
margin-top: 30px;
name {
color: red;
Page 20 of 39
usn {
color: rgb(51, 185, 27);
Output:
Program 6: Write a PHP program to keep track of the number of visitors visiting the web
page and to display this count of visitors, with proper headings.
Program:
<?php
Page 21 of 39
// File to store the visitor count
$counterFile = "visitor_count.txt";
// Function to increment the visitor count and return the
updated count
function incrementVisitorCount($counterFile) {
// Read the current count from the file
$count = (int) file_get_contents($counterFile);
// Increment the count
$count++;
// Write the updated count back to the file
file_put_contents($counterFile, $count);
// Return the updated count
return $count;
// Get the visitor count
$visitorCount = incrementVisitorCount($counterFile);
?>
<!DOCTYPE html>
<html>
<head>
<title>Visitor Count</title><style>
#visitor-count {
font-size: 24px;
text-align: center;
Page 22 of 39
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<div id="visitor-count">
<h2>Visitor Count:</h2>
<p><?php echo $visitorCount; ?></p>
</div>
</body>
</html>
OUTPUT:
Program 7: Write a PHP program to display a digital clock which displays the current time
of the server.
Program:
Page 23 of 39
<!DOCTYPE html>
<html>
<head>
<title>Digital Clock</title>
<script>
function updateClock() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
hours = (hours < 10 ? "0" : "") + hours;
minutes = (minutes < 10 ? "0" : "") + minutes;
seconds = (seconds < 10 ? "0" : "") + seconds;
var timeString = hours + ":" + minutes + ":" +
seconds;
document.getElementById("clock").innerHTML =
timeString;
setInterval(updateClock, 1000);
</script>
<style>
#clock {
font-size: 48px;
font-weight: bold;
Page 24 of 39
}</style>
</head>
<body>
<h1>Digital Clock</h1>
<div id="clock"></div>
</body>
</html>
OUTPUT:
Program 8:
Page 25 of 39
a) Write the PHP programs to do the following:

Implement simple calculator operations.Find the transpose of a matrix.
Multiplication of two matrices.Addition of two matrices
Program:
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8"> <title></title>
</head>
<header>SOUMYA RANJAN DAS<br>1CR20CS188</header>
<body>
<h1>Simple Calculator Using PHP</h1> <form method="post">
<table>
<tr><td>Enter First Number: </td><td><input type="text" name="first" required
autocomplete="off"/></td></tr>
<tr><td>Enter Second Number: </td><td><input type="text" name="second" required
autocomplete="off"/></td></tr>
<tr><td>Select Operator: </td><td>
<select name="op">
<option>Select Operation</option>
<option value="+">Addition</option>
<option value="-">Subtraction</option>
<option value="*">Multiplication</option>
<option value="/">Division</option>
<option value="%">Remainder</option>
</select>
Page 26 of 39
</td></tr>
<tr><td colspan="2"><input type="submit" name="pop" value="Perform

Operation"/></td></tr>
</table>
</form>
<?php if(isset($_POST['pop'])) {
echo "<h1>Result is </h1>"; $num1 = $_POST["first"]; $num2 = $_POST["second"]; $op =

$_POST["op"];
$result = 0;
switch($op) {
case '+' : $result = $num1 + $num2;
echo "<h1>Addition of 2 Numbers: " . $result . "</h1>";
break;
case '-' : $result = $num1 - $num2;
echo "<h1>Subtraction of 2 Numbers: " . $result . "</h1>";
break;
case '*' : $result = $num1 * $num2;
echo "<h1>Product of 2 Numbers: " . $result . "</h1>";
break;
case '/' : $result = $num1 / $num2;
echo "<h1>Division of 2 Numbers: " . $result . "</h1>";
break;
case '%' : $result = $num1 % $num2;
echo "<h1>Remainder of 2 Numbers: " . $result . "</h1>"; break;
default : echo "<h1 style='color:red;'>Sorry, No Operation Found</h1>";
Page 27 of 39
break;
?>
</body>
</html>
Output:
b) Find the transpose of a matrix.
Page 28 of 39
Multiplication of two matrices.Addition of two matrices.
Program:
<?php
echo"SOUMYA RANJAN DAS\n";
echo"1CR20CS188";
header('Content-Type: text/plain');
$matrix1 = array(array(1, 2), array(4, 5));
$matrix2 = array(array(1, 2), array(4, 5));
echo "\n\n\n";
echo "The order of the matrix A is:" . count($matrix1) . "x" . count($matrix1[0]); echo "\n";
echo "The order of the matrix B is:" . count($matrix2) . "x" . count($matrix2[0]); echo "\n";
$rowCount = count($matrix1);
$colCount = count($matrix1[0]);
echo "The input matrix A is:\n";
for ($r = 0; $r < $rowCount; $r++) { for ($c = 0; $c < $colCount; $c++) {
echo $matrix1[$r][$c] . " \t";
echo "\n";
echo "The input matrix B is:\n";
for ($r = 0; $r < $rowCount; $r++) {
for ($c = 0; $c < $colCount; $c++)
echo $matrix2[$r][$c] . " \t";
Page 29 of 39
echo "\n";
echo "\nThe output Transpose of matrix is:\n";
for ($r = 0; $r < $colCount; $r++)
for ($c = 0; $c < $rowCount; $c++)
echo $matrix1[$c][$r] . " \t";
echo "\n";
$rowCount2 = count($matrix2);
$colCount2 = count($matrix2[0]);
echo "\nThe sum of matrix is:\n";
for ($r = 0; $r < $rowCount; $r++) {
for ($c = 0; $c < $colCount; $c++) {
$val = $matrix1[$r][$c] + $matrix2[$r][$c];
echo $val . "\t";
}echo "\n";
Page 30 of 39
$rowCount2 = count($matrix2);
$colCount2 = count($matrix2[0]);
echo "\nThe Multiplication of matrix is:\n";
if($colCount == $rowCount2)
for($r = 0;$r < $rowCount;$r++)
for($c = 0;$c < $colCount;$c++)
$val = $matrix1[$r][$c] * $matrix2[$r][$c]; echo $val."\t";
echo "\n";
} else {
echo "The matrix multiplication is not possible.";
?>
Output:
Page 31 of 39
Program 9:
Page 32 of 39
Write a PHP program named states.py that declares a variable states with value “Mississippi
Alabama Texas Massachusetts Kansas". write a PHP program that does the following:
5. Search for a word in variable states that ends in xas. Store this word in element0 of a
list named states List.
6. Search for a word in states that begins with k and ends in s. Perform a case-
insensitive comparison. [Note: Passing re.Ias a second parameter to method compile
performs a case-insensitive comparison.] Store this word in element1 of states List.
7. Search for a word in states that begins with M and ends in s. Store this word in
element 2 of the list.
Search for a word in states that ends in a. Store this word in element 3 of the listCode:
Program:
<?php
echo"SOUMYA RANJAN DAS\n";
echo"1CR20CS188";
header('Content-Type: text/plain');
$allTheStates = "Mississippi Alabama Texas Massachusetts Kansas";
$statesArray = [];
$states1 = explode(' ', $allTheStates);
$i = 0;
//states that ends in xas
foreach ($states1 as $state) {
if (preg_match('/xas$/', ($state))) {
$statesArray[$i] = ($state);
$i = $i + 1;
print "\nThe States that ends in xas:" . $state;
//states that begins with k and ends in s
Page 33 of 39
foreach ($states1 as $state) {
if (preg_match('/^k.*s$/i', ($state))) {
$i = $i + 1;
echo "\nThe states that begins with k ans ends in s:" . $state;
//states that begins with M and ends in s
foreach($states1 as $state) {
if (preg_match('/^M.*s$/', ($state))) {
$i = $i + 1;
echo "\nThe states that begins with M and ends in s:" . $state;
//states that ends in a
foreach($states1 as $state) {
if (preg_match('/a$/', ($state))) { $statesArray[$i] = ($state);
$i = $i + 1;
echo "\nThe states that ends in a:" . $state;
foreach ($statesArray as $element => $value) { print( "\n" . $value . " is the element " .
$element);}
?>
Output:
Page 34 of 39
Program 10: Write a PHP program to sort the student records which are stored in the database
using selection sort.
Page 35 of 39
PROGRAM:
<?php
echo"soumya ranjan\n";
echo"1CR20CS188";
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "weblab";
$a=[];
$conn = mysqli_connect($servername, $username, $password, $dbname);
if ($conn->connect_error)
die("Connection failed: " . $conn->connect_error);
$sql = "SELECT * FROM student";
$result = $conn->query($sql);
echo "<br>";
echo "<center> BEFORE SORTING <center>";
echo "<table border='2'>";
echo "<tr>";
echo "<th>USN</th><th>NAME</th><th>Address</th></tr>";
if ($result->num_rows> 0)
while($row = $result->fetch_assoc())
Page 36 of 39
echo "<tr>";
echo "<td>". $row["usn"]."</td>";
echo "<td>". $row["name"]."</td>";
echo "<td>". $row["addr"]."</td></tr>";
array_push($a,$row["usn"]);
else
echo "Table is Empty";
echo "</table>";
$n=count($a);
$b=$a;
for ( $i = 0 ; $i< ($n - 1) ; $i++ )
$pos= $i;
for ( $j = $i + 1 ; $j < $n ; $j++ )
if ( $a[$pos] > $a[$j] )
$pos= $j;
if ( $pos!= $i )
$temp=$a[$i];
$a[$i] = $a[$pos];
Page 37 of 39
$a[$pos] = $temp;
$c=[];
$d=[];
$result = $conn->query($sql);if ($result->num_rows> 0)
while($row = $result->fetch_assoc())
for($i=0;$i<$n;$i++)
if($row["usn"]== $a[$i])
$c[$i]=$row["name"];
$d[$i]=$row["addr"];
echo "<br>";
echo "<center> AFTER SORTING <center>";
echo "<table border='2'>";
echo "<tr>";
echo "<th>USN</th><th>NAME</th><th>Address</th></tr>";
Page 38 of 39
for($i=0;$i<$n;$i++)
echo "<tr>";
echo "<td>". $a[$i]."</td>";
echo "<td>". $c[$i]."</td>";
echo "<td>". $d[$i]."</td></tr>";
echo "</table>";
$conn->close();
?>
Output:
Page 39 of 39

WEB - Record - 6th Sem

Uploaded by

Copyright:

Available Formats

WEB - Record - 6th Sem

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WEB - Record - 6th Sem

Uploaded by

Copyright:

Available Formats

VISVESVARAYA TECHNOLOGICAL UNIVERSITY

Jnana Sangama, Belgaum-590018

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CMR INSTITUTE OF TECHNOLOGY

#132, AECS LAYOUT, IT PARK ROAD, KUNDALAHALLI, BANGALORE-560037

WEB TECHNOLOGY AND ITS APPLICATIONS

Name: SOUMYA RANJAN DAS

Prescribed List of Programs

1 05/05/23 Write a JavaScript to design a simple calculator to perform

4 13/05/23 Develop and demonstrate a HTML5 file that includes

5 24/03/23 Design an XML document to store information about a

8 19/06/23 Write the PHP programs to do the following:

9 19/06/23 Write a PHP program named states.py that declares a

Program 1: Write a JavaScript to design a simple calculator to perform the following

<link rel="stylesheet" type="text/css" href="style.css">

<h1>SOUMYA RANJAN DAS 1CR20CS188</h1>

<input type="text" id="input">

let input = document.getElementById("input");

grid-template-columns: repeat(4, 1fr);

document.write("<h1>soumya ranjan das, 1CR20CS188</h1>")

document.write("<h1>Square and cube of Numbers from 0 to 10<h1>")

document.write("<tr><td> "+ i +" </td><td>"+ i*i + "</td><td>"+i*i*i+"</td></tr>")

Program 3: Write a JavaScript code that displays text “TEXT-GROWING” with

let growing = true;

const textElement = document.getElementById("text");

textElement.style.fontSize = fontSize + "pt";

if (fontSize === 50) {

textElement.style.fontSize = fontSize + "pt";if (fontSize === 5) {

 Output: The position in the string of the left-most vowel

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

var str=prompt("Enter the string","hello");

document.write("The String is "+str+"<br>");

if(ch=="A" || ch=="E" || ch=="I" || ch=="O" || ch=="U") break;

if(i<str.length) document.write("The left most vowel is at position :"+(i+1));

else document.write("No vowel found");

var num=prompt("Enter the Number","");

document.write("The given number is :"+num+"<br>The reversed number is :"+rev );}

<body style="pad: 20px;">

<div style="padding: 20px;">

<input type="button" value="left Most vowel" onclick="lmv()">

<input type="button" value="Reverse a number" onclick="rev_num()">

Program 5: Design an XML document to store information about a student in an

<?xml-stylesheet type="text/css" href="style.css"?>

<Name>NAME: SOUMYA RANJAN DAS</Name>

<name>NAME: SOUMYA RANJAN DAS</name>

<branch>BRANCH: CSE </branch>

<yoj>YEAR OF JOINING: 2020</yoj>

<branch>BRANCH: CSE </branch>

<yoj>YEAR OF JOINING: 2020</yoj>

<name>NAME: Anika N</name>

<branch>BRANCH: ISE </branch>

<yoj>YEAR OF JOINING: 2021</yoj>

font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

color: rgb(13, 13, 186);

color: rgb(51, 185, 27);

// File to store the visitor count

// Function to increment the visitor count and return the

document.write("<tr><td> "+ i +" </td><td>"+ ii + "</td><td>"+ii*i+"</td></tr>")

case '' : $result = $num1 $num2;