FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

Web Technologies
Subject Code: MCAL14
A Practical Journal Submitted in Fulfillment of the Degree of
MASTER
in
COMPUTER APPLICATION
Year 2023-2024
By
Mr. Vivek Balaso Desai
(Seat No-10266)
(Application Id-76229)

Under the Guidance of

Asst. Prof. Seema Murkar

Institute of Distance and Open Learning

Vidya Nagari, Kalina, Santacruz East – 400098.
University of Mumbai

PCP Center
Vidyalankar School of Information Technology

Address: Vidyalankar College Rd, Wadala East, Sangam Nagar, Antop

Hill, Mumbai, Maharashtra 400037

1
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

Institute of Distance and Open Learning

Vidya Nagari, Kalina, Santacruz East – 400098.

CERTIFICATE

This to certify that, DESAI VIVEK BALASO KIRAN appearing Master in

Computer Application (Semester I) Application ID: 76229, Seat No:10266 has
satisfactory completed the prescribed Practical of MCAL14- Web Technologies as
laid down by the University of Mumbai for the academic year 2023- 24

Teacher in charge Examiners Coordinator

IDOL, MCA
University of Mumbai
Date: -
Place: -

2
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

INDEX

Sr.No. Title Sign

1 Node.JS Basics
a. Basic arithmetic operations using node JS
b. String Operations
c. Program to create Functions to print Factorial of a
number

2 a. Program to print name on the browser using node.js

b. Node.js Modules

3 a. URL Module
b. File Module

4 Angular JS
a. Write a program to display your name with welcome
note :HELLO
b. Write a simple program for multiplication

5 Single Page Application in Angular JS

6 Create an application using Filters

7 Implement the use of number filter

8 Implement the date filter

3
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

Practical No: 1

A] Basic arithmetic operation using node JS:

let x=10;
let y =20;
console.log("x="+x);
console.log("y="+y);
console.log("Addition=",(x+y));
console.log("Substraction=",(x-y));
console.log("Division=",(x/y));
console.log("Multiply=",(x*y));
console.log("Percentage=",(x%y));
console.log("Pre Increment x=",(++x));
console.log("Pre Decrement x=",(--x));
console.log("Post Increment x=",(x++));
console.log("Post Decrement x=",(x--));

B] Basic String Operations using node JS:

let s1 = "Node JS";

let s2 = "Javascript";
let s3=["node","java","angular"];

4
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

console.log("s1=",s1);
console.log("s2=",s2);
console.log("Concantenation=",(s1+","+s2));
console.log("Concantenation with function=",s1.concat(s2));
console.log("Split=",s1.split(' '));
console.log("Join=",s3.join('- '));
console.log("Character at 5th position=",s1.charAt(5));
console.log("Length=",s1.length);
console.log("UpperCase=",s2.toUpperCase());
console.log("LowerCase=",s1.toLowerCase());

C] Program to create function to print factorial of a number using node JS:

function factorial(n){
let f=1;
for(let i=1;i<=n;i++)
{
f=f*i;
}
return f;
}
let n=7;

5
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

console.log("factorial=",factorial(n));

D] Program to create function to perform math operation like square, cube, squareroot,
min, max, round of a number using node JS:
function MathOperations() {
console.log("Squareroot of 10=",Math.sqrt(10));
console.log("Square of 6=",Math.pow(6,2));
console.log("Cube of 9=",Math.pow(9,3));
console.log("Cube of 9=",Math.pow(9,3));
console.log("Minimum=",Math.min(111,232));
console.log("Max=",Math.max(111,232));
console.log("Round=",Math.round(10.734));
console.log("Ceil=",Math.ceil(10.734));
console.log("Floor=",Math.floor(10.734)); }
MathOperations();

6
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

Practical No: 2

A] Print your Name on browser using node JS.

var http =require('http');
http.createServer(function(req ,res){
res.writeHead(200,{'Content-Type':'text/html'});
res.end('Happy birthday vivek');
})
.listen(8080);

B] Node JS modules :

Mymodule.js:
exports.myDateTime=function()
{
return Date();
};
Module.js:
var http = require('http');

var dt = require('./mymodule');
http.createServer(function (req ,res)

7
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

res.writeHead(200,{'Content-Type':'text/html'});
res.write("The date and time are currently: " + dt.myDateTime());
res.end();
}).listen(8080);

8
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

Practical No: 3

A] Node JS URL Module :

var url = require('url');

var adr = 'http://localhost:8080/default.html?year=2017&month=Feburary';
var q = url.parse(adr,true);
console.log(q.host); //returns 'localhost:8080'
console.log(q.pathname); //returns '/default.html'
console.log(q.search); //returns '?year=2017&month=Feburary'
var qdata = q.query; //returns an object: {year=2017 , month='Feburary'}
console.log(qdata.month); //returns 'feburary'

B] File Module :

1. Create :
var http=require('http');
var fs=require('fs');
http.createServer(function (req,res){
fs.appendFile('mynewfile1.txt','Hello content!',function (err){
if(err) throw err;
console.log('Saved!');
return res.end();
});
}).listen(8080);

9
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

3. Rename:
var http=require('http');
var fs=require('fs');
http.createServer(function (req,res){
fs.rename('mynewfile1.txt','myrenamedfie.txt',function (err){
res.writeHead(200,{'Contsnt-Type':'test/html'});
res.write("rename done");
return res.end();
});
}).listen(8080);

4. Delete:
var http=require('http');
var fs=require('fs');
http.createServer(function (req,res){
fs.unlink('mynewfile1.txt',function (err){
if(err) throw err;
console.log('file deleted');
});
}).listen(8080)

10
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

Practical No: 4

A] Write a program to display your name with Welcome note Hello in Angular JS.
testAngularJS.html:
<html>
<head>
<title>AngularJS First Application</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>

index.html:
<hr><!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello {{yourName}}!</h1>

11
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

</div>
</body>
</html>

B] Write a Simple program for multiplication in AngularJS.

<!DOCTYPE html>
<html>
<head>
<title>First AngularJS Application</title>
<script src= "~/Scripts/angular.js"></script>
</head>
<body ng-app >
<h1>First AngularJS Application</h1>
Enter Numbers to Multiply:
<input type="text" ng-model="Num1" /> x <input type="text" ng-model="Num2" />
= <span>{{Num1 * Num2}}</span>
</body>
</html>

12
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

Practical No: 5

A] Single Page Application in Angular JS

<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular- route.min.js"></script>
</head>
<body>
<script type="text/ng-template" id="pages/first.html">
<h1>First</h1>
<h3>{{message}}</h3>
</script>
<script type="text/ng-template" id="pages/second.html">
<h1>Second</h1>
<h3>{{message}}</h3>
</script>
<script type="text/ng-template" id="pages/third.html">
<h1>Third</h1>
<h3>{{message}}</h3>
</script>
<a href="#/">First</a>
<a href="#/second">Second</a>
<a href="#/third">Third</a>
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>

13
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

14
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

Practical No: 6

A] Create an application using Filters

<html>
<head>
<title>Angular JS Filters</title>
<script
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr><tr>
<td>Enter last name: </td>
<td><input type = "text" ng-model = "student.lastName"></td>
</tr><tr>
<td>Enter fees: </td>
<td><input type = "text" ng-model = "student.fees"></td>
</tr><tr>
<td>Enter subject: </td>
<td><input type = "text" ng-model = "subjectName"></td>
</tr>
</table>
<br/>
<table border = "0">
<tr>
<td>Name in Upper Case: </td><td>{{student.fullName() uppercase}}</td>
</tr><tr>

15
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

<td>Name in Lower Case: </td><td>{{student.fullName() lowercase}}</td>

</tr><tr>
<td>fees: </td><td>{{student.fees | currency}}
</td></tr>
<tr>
<td>Subject:</td><td>
<ul>
<li ng-repeat = "subject in student.subjects | filter:
subjectName |orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li></ul></td></tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65}],
fullName: function() { var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;}};});</script></body></html>

16
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

Practical No: 7

A] Implement the use of number filter

Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-number-filter-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="numberFilterExample">
<script> angular.module('numberFilterExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.val = 1234.56789;
}]);
</script>
<div ng-controller="ExampleController">
<label>Enter number: <input ng-model='val'></label><br> Default formatting: <span id='number-
default'>{{val | number}}</span><br>
No fractions: <span>{{val | number:0}}</span><br> Negative number: <span>{{-val |
number:4}}</span>
</div>
</body>
</html>

Protractor.js
it('should format numbers', function() {
expect(element(by.id('number-default')).getText()).toBe('1,234.568');
expect(element(by.binding('val | number:0')).getText()).toBe('1,235');
expect(element(by.binding('-val | number:4')).getText()).toBe('-1,234.5679');
});

17
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

it('should update', function() {

element(by.model('val')).clear();
element(by.model('val')).sendKeys('3374.333');
expect(element(by.id('number-default')).getText()).toBe('3,374.333');
expect(element(by.binding('val | number:0')).getText()).toBe('3,374');
expect(element(by.binding('-val | number:4')).getText()).toBe('-3,374.3330');
});

18
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

Practical No: 8

A] Implement date filter in angularjs applications

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Date filter Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.m in.js"></script>
<script>
var app = angular.module("AngulardateApp", []); app.controller("datectrl", function ($scope) {
$scope.sampledate = new Date();
});
</script>
</head>
<body ng-app="AngulardateApp">
<div ng-controller="datectrl">
Enter Number: <input type="text" ng- model="sampledate" style="width:400px" />
<br /><br />
Date with short expression:{{sampledate | date:"short" }}
<br />
<br /> Date with mediumDate expression: {{sampledate | date : "mediumDate"}}
<br /><br />
Date with yyyy-mm-dd hh:mm:ss expression: {{sampledate | date : "yyyy- mm-dd hh:mm:ss" : 0}}
<br /><br />
Date with yyyy-mm-dd hh:mm:ss expression: {{sampledate | date : "dd/mm/yyyy 'at' hh:mma" : 0}}
</div>
</body>

19
FYMCA SEM 1 WEB TECNHOLOGIES VIVEK BALASO DESAI

</html>

20