AWP Lab Manual

[190630116041] BATCH: [C]
Madhuben and Bhanubhai Patel

Institute of Technology
New Vallabh Vidyanagar
PRACTICAL LIST
No Content PageNo Date Sign CO
Refreshing Java Script and CSS
1 Design a web pages of your department with an attractive 3 CO1
background color, text color , an Image , font etc. (use external
CSS).
2 Create HTML Page with javascript which takes Integer number 13 CO1
as input and tells whether the number is ODD or EVEN.
3 Write a JavaScript program to check if number is prime or not. 15
4 Write a program to create a simple calculator using JavaScript. 17 CO1
5 Create HTML Page that contains form with fields Name , Email, 20
MobileNo , Gender , Favorite Color and a button. write a
JavaScript code to combine and display the information in
textbox when the button is clicked.
6 write a javascript program to create user defined object Car with 24 CO1
carModelName, carColor, carPrice, carSpeed properties and
with displaySpeed(s),increaseSpeed(s) and DescreaseSpeed(s)
as methods.
7 Write a JavaScript to loads and display HTML file on webpage 26 CO1
using Asynchronous Programming.
8 Use Bootstrap in Practical No.1 to make webpage Responsive. 28 CO1
Angular JS Program
1 Design Order Form with a total price updated in real time, 33 CO2
which contains name of five products and their prices. Create a
bill amount for all the products and calculate GST on the billing
amount and display total amount.
2 Implement AngularJs to create your Resume. 37 CO2
3 Use Practical No.01 and initialize prices to 0 ( zero) when form 47 CO2
loads. (use module,controller& directive)
4 Design a webpage which takes one number as an input and 51 CO2
generate its factorial number (use module, controller)
5 Design a webpage which takes inputs product name, product 53 CO2
quantity and price. Generate table of entered values. When user
clicks on table column title , it should sort that column values.
(use filter, array)
6 Design a webpage which display product name and product 57 CO2
price using AngularJS $http Service from database. Display the
content in tabular format.
1|P ag e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

[190630116041] BATCH: [C]
Node JS Program
1 Write a module of calculator which will perform all the basic 60 CO3
operations like add(),sub(),mul() and div().Use the module in a
program and display the output.
2 Create a program to override function. 61 CO3
3 Create a node js program to perform file operations like create a 62 CO3
file,read a file,write to file and delete a file.
4 Write a program to connect with the database. 64 CO4
5 Write a program to parse URL Parameter. 73 CO4
Database Programming with Node JS and MongoDB

1 Create an application using AngularJs, NodeJs and Mongodb.
CO5
Reference Books:
1. Angularjs in Action ISBN 9789351198383 Ruebbelke, Wiley Publication
2. Pro AngularJS Freeman Apress publication
3. Node.js in Action ISBN 9789386052049 Alex Young, Bradley Meck, Mike Cantelon, Tim Oxley,
Marc Harter, T.J. Holowaychuk, Nathan Rajlich, Wiley Publication
Website:
1. https://www.w3schools.com/angular/
2. https://www.javatpoint.com/nodejs-tutorial
3. https://nodejs.org/en/download/
4. https://www.mongodb.com/

[190630116041] BATCH: [C]
PRACTICAL1
AIM: Design a web pages of your department with an attractive background color, text
color , an Image , font etc. (use external CSS).
CODE:
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-pale-green" >
<div class="topnav">
<a class="w3-button" href="#home">HOME</a>
<a class="w3-button" href="aboutdept.html">ABOUT US</a>
<a class="w3-button" href="http://syllabus.gtu.ac.in/">SUBJECTS/SYLLABUS</a>
<a class="w3-button" href="faculties.html">FACULTIES</a>
<a class="w3-button" href="facilities.html">FACILITIES</a>
<imgsrc="geclogo3.png" align="right"></img>
</div>
<div class="w3-panel">
<h2 class="w3-bar w3-text-green"align="center"><u><b>INFORMATION TECHNOLOGY
DEPARTMENT</b></u></h2>
</div><br /><hr/>
<p><h2 style="color:seagreen;">This department is running from 1999. The staff has
developed required laboratories in the areas like <br>Computer Hardware, Computer
Networking & Security, Database Management System, Computer Graphics and Internet
Technology in tune with real-time systems.
</h2></p>
</body>
</html>

[190630116041] BATCH: [C]
aboutdept.html
<html>
<head>
</head>
<body class="w3-pale-green">
<h1 align="center" class="w3-text-green"><u>About Department</u></h1>
<p>This department is running from 1999. The staff has developed required laboratories in
the areas like Computer Hardware, Computer Networking & Security, Database Management
System, Computer Graphics and Internet Technology in tune with real-time systems.</p>
<p>The department has various laboratories in the area of Computer Hardware, Computer
Networking and network security, Data Base management system, Computer Graphics and
internet Technology in tune with the real-time system.</p>
The internet access is provided to the students to update their knowledge in the various
fields.The campus-wide area network is managed through this department. The newly
developed computer center for this department is equipped with more than 250 latest
computer system connected with LAN and loaded with various softwares.
<p>Computer Engineering and Information Technology department run in a newly

constructed, well-furnished building. The main strength of the department is highly qualified
and well-experienced faculties. Also, the department is well equipped with an ample number
of computer systems, networking of more than 250 nodes and required software and
hardware. Department has well equipped 10 computer laboratories and two seminar halls.
Campus Wide Network of college is handled by the department with 30 Wi-Fi access points
with 1 controller. It has High-End Servers available for various activities.</p>
<h2 align="center" class="w3-text-green"><u>About Course</u></h2>
<p>The field of information technology (IT) covers the design, administration and support of
computer and telecommunications systems. Some of the positions in this field include
database and network administrators, computer support specialists, computer scientists,
software programmers and system analysts. The majority of career tracks in IT entail design
and operational tasks related to computer hardware components, networks and software
applications.</p>

[190630116041] BATCH: [C]
<p>Professionals in the IT field work with businesses and organizations to set up and support
viable computer networks that will keep systems efficient and reliable. IT encompasses all
hardware and software used in the storing, creation and accessing of information. Examples
of technologies that professionals work with are firewalls, databases, media storage devices,
networks and the Internet.</p>
<p>Aspiring IT professionals typically need a bachelor's degree in a technology field, such as

computer science, information systems management, programming or networking. Even
without a degree, experience in an entry-level help desk position could help IT professionals
advance with professional certification or vocational training. The fundamentals of a degree
program generally include computer hardware, programming, networking, and technical
theory. Depending on the major, students could also learn IT management, website
development, computer circuitry, systems analysis and database management. Some
programs also include internship opportunities. To work as a computer research scientist, a
Ph.D. degree is often necessary.</p>
</body>
</html>
facultities.html
<html>
<head>
</head>
<h2 class="w3-text-green">Faculties</h2>
<table border="1px" class=" w3-border">
<tr>
<td colspan="2"><img width="100px" height="120px"
src="https://www.w3schools.com/howto/img_avatar.png"/>
<b>HIRENKUMAR
RAMANBHAI PATEL</b></td>
<tr

[190630116041] BATCH: [C]
class="trfac"><td>Designation</td><td>: ASSISTANT PROFESSOR IT</td></tr></br>

<tr><td>Qualification</td><td>: ME COMPUTER ENGINEERING</td></tr></br>
<tr>
<td>Experience</td>
<td>:
10+</td></tr></br>
<tr>
<td>Date of joining</td>
<td>: 14-12-2009</td>
</tr>
</br>
<tr>
<td>Area of Interest</td>
<td>: WEB DEVELOPMENT, CLOUD computing
</br> DATA MINING</td>
</tr>
</br>
<tr>
<td>Email</td>
<td>: hrpatel@gecmodasa.org</td>
</tr>
</br>
<tr>
<td>Website</td>
<td>: <a href="http://www.renruhak.org/"> http://www.renruhak.org</a>
</td>
</tr>
</br>
</table>

[190630116041] BATCH: [C]
</tr>
</table>
</div>
<table border="3">
<tr
class="imgfac"></td>
Jani</b></th>
DEPARTMENT </td>
<td colspan="2"><img width="100px" height="120px"
src="https://www.w3schools.com/howto/img_avatar.png"/>
<td>
<table border="1">
<thcolspan="2"><b>Kuntesh K
<tr class="trfac">
<td>Designation</td>
<td>: ASSISTANT PROFESSOR IT
</tr>
</br>
<tr>
<td>Qualification</td>
<td>: M.Tech</td>
</tr>
</br>
<tr>
<td>Experience</td>
<td>:10 years</td>
</tr>
</br>
<tr>
<td>Date of joining</td>
<td>: 01-06-2016</td>

[190630116041] BATCH: [C]
</tr>
</br>
<tr>
<td>Area of Interest</td>
<td>: ML</td></tr>
</br>
<tr>
<td>Email</td>
<td>: kkjani@gecmodasa.org</td>
</tr>
</br>
<tr>
<td>Website</td>
<td>: <a> -</a></td></tr></br>
</table>
</tr>
</table>
</body>
</html>
facilities.html
<html>
<head>
</head>
<table border="1"class="w3-table" >
<tr>
<td colspan="2" align="center" class="w3-text-green w3-
head"><h2>FACILITIES</h2></td>
</tr>
<tr>

[190630116041] BATCH: [C]
<td>Wi-Fi enabled Department</td>

<td>Campus Wide Fiber Optic Cable Network</td>
</tr>
<tr>
<td>System Lab</td>
<td style="font-size:25">Network Lab</td>
</tr>
<tr>
<td style="font-size:25">Android Lab</td>
<td style="font-size:25">Advance Project Lab</td>
</tr>
<tr>
<td >Appl. Development Lab</td>
<td style="font-size:25">DBMS Lab</td>
</tr>
<tr>
<td style="font-size:25">DLD Lab</td>
<td >Operating System Lab</td>
</tr>
<tr>
<td >Wi-Fi enabled Department</td>
<td style="font-size:25">Campus Wide Fiber Optic Cable Network</td>
</tr>
<tr>
<td style="font-size:25">System Lab</td>
<td style="font-size:25">Network Lab</td>
</tr>
<tr>
<td style="font-size:25">Android Lab</td>
<td style="font-size:25">Advance Project Lab</td>

[190630116041] BATCH: [C]
</tr>
<tr>
<td style="font-size:25">Appl. Development Lab</td>
<td style="font-size:25">DBMS Lab</td>
</tr>
<tr>
<td style="font-size:25">DLD Lab</td>
<td style="font-size:25">Operating System Lab</td>
</tr>
</table>
</body>
OUTPUT(home page)
10 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

[190630116041] BATCH: [C]
OUTPUT(about page)

[190630116041] BATCH: [C]
OUTPUT(facultities)
OUTPUT(facilities)

[190630116041] BATCH: [C]
PRACTICAL 2
AIM: Create HTML Page with javascript which takes Integer number as input and tells
whether the number is ODD or EVEN.
CODE:
<!doctype html>
<html>
<head>
<script>
function odd_even(){
var no;
no=Number(document.getElementById("no_input").value);
if(no%2==0)
{
alert("Even Number");
}
else
{
alert("Odd Number");
}
}
</script>
</head>
<body>
Enter Any Number:<input id="no_input"><br />
<button onclick="odd_even()">Click me</button>
</body>
</html>

[190630116041] BATCH: [C]
OUTPUT

[190630116041] BATCH: [C]
PRACTICAL 3
AIM: Write a JavaScript program to check if number is prime or not.

CODE:
<!DOCTYPE html>
<html>
<head>
<title>
Check a number is Prime or
not using JavaScript
</title>
<script type="text/javascript">
function p() {
var n, i, flag = true;
n = document.myform.n.value;
n = parseInt(n)
for(i = 2; i<= n - 1; i++)
if (n % i == 0) {
flag = false;
break;
}
if (flag == true)
alert(n + " is prime");
else
alert(n + " is not prime");
}
</script>
</head>
<body>
<center>
<h4>Check the number is prime or not</h4>
<form name="myform">

[190630116041] BATCH: [C]
Enter the number:

<input type="text" name=n value="">
<br><br>
<input type="button" value="Check" onClick="p()">
<br>
</form>
</center>
</body>
</html>
OUTPUT: 1

[190630116041] BATCH: [C]
PRACTICAL 4
AIM: Write a program to create a simple calculator using JavaScript.

CODE:
<html>
<head>
<script>
function dis(val)
{
document.getElementById("result").value+=val
}
function solve()
{
let x = document.getElementById("result").value
let y = eval(x)
document.getElementById("result").value = y
}
functionclr()
{
document.getElementById("result").value = ""
}
</script>
<style>
.title{
margin-bottom: 10px;
text-align:center;
width: 409px;
color:green;
border: solid black 2px;
}

[190630116041] BATCH: [C]
</style>
</head>
<body>
<h1 class="w3-bar w3-teal w3-center">CALCULATOR</h1>
<table border="1" height="200px" align="center">
<tr>
<td colspan="3"><input class="w3-input" type="text"
id="result"/></td>
<td><input class="w3-button w3-teal w3-bar" type="button"
value="c" onclick="clr()"/></td>
</tr>
<tr>
<td><input type="button" class="w3-button w3-teal w3-bar"
value="1" onclick="dis('1')"/></td>
<td><input type="button" class="w3-button w3-teal w3-bar" value="/"
onclick="dis('/')"/></td>
</tr>
<tr>
<td><input type="button" class="w3-button w3-teal w3-bar" value="-"
onclick="dis('-')"/></td>
</tr>
<tr>

[190630116041] BATCH: [C]

value="+" onclick="dis('+')"/></td>
</tr>
<tr>
<td><input type="button" class="w3-button w3-teal w3-bar" value="."
onclick="dis('.')"/></td>
value="=" onclick="solve()"/></td>
value="*" onclick="dis('*')"/></td>
</tr>
</table>
</body>
</html>
OUTPUT:

[190630116041] BATCH: [C]
PRACTICAL 5
AIM: Create HTML Page that contains form with fields Name, Email, MobileNo,
Gender ,FavoriteColor and a button. write a JavaScript code to combine and display
the information in textbox when the button is clicked.
CODE:
<html>
<head>
<title>form</title>
</head>
<body>
<form>
<center>
<fieldset>
<legend class="w3-teal"> Information </legend>
<table class="w3-teal" border="5px" height="400px">
<tr>
<td width="300px"><b> Full Name </b></td>
<td width="300px"><input class="w3-input" type="text" name="fname" id="fname"
/></td>
</tr>
<tr>
<td width="300px"><b> Email </b></td>
<td width="300px"><input class="w3-input" type="email" name="email" id="email"
/></td>
</tr>
<tr>
<td width="300px"><b> Mobile Number </b></td>
<td width="300px"><input class="w3-input" type="Number" name="mobile"
id="mobile" /></td>
</tr>

[190630116041] BATCH: [C]
<tr>
<td width="300px"><b> Gender </b></td>
<td width="300px">
<select class="w3-input" id="myg" name="myg">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</td>
</tr>
<tr>
<td width="300px"><b>FavoriteColor</b></td>
<td width="300px"><input class="w3-input" type="text" name="fcolor" id="hobby"
/></td>
</tr>
<tr>
<td width="300px"><b> Information Display </b></td>
<td width="300px"><input class="w3-button w3-amber" type="submit"
value="Display" onclick="displayinfo()" name="Display" /></td>
</tr>
</table>
</fieldset>
</form>
</center>
<script type="text/javascript">
function displayinfo(){
var name = document.getElementById('fname').value;
var email = document.getElementById('email').value;

var mnum = document.getElementById('mobile').value;

[190630116041] BATCH: [C]
var gender = document.getElementById('myg').value;
var fcolor = document.getElementById('hobby').value;

document.write( "Your Name : "+ name +"<br>");
document.write( "Your Email : "+ email +"<br>");
document.write( "Your Mobile Number : "+ mnum +"<br>");
document.write( "Your Gender : "+ gender +"<br>");
document.write( "Your FavoriteColor : "+ fcolor +"<br>");
}
</script>
</body>
</html>
OUTPUT:

[190630116041] BATCH: [C]
OUTPUT: After Display

[190630116041] BATCH: [C]
PRACTICAL 6
AIM: write a javascript program to create user defined object Car with
carModelName, carColor, carPrice, carSpeed properties and with
displaySpeed(s),increaseSpeed(s) and DescreaseSpeed(s) as methods.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Objects</title>
</head>
<body>
<script language="Javascript" type="text/Javascript">
function car(carmodelname, carcolor, carprice, carspeed){
this.carModelName = carmodelname;
this.carColor = carcolor;
this.carPrice =carprice;
this.speed = new Object();
this.speed.carSpeed = carspee
this.detais = showCar;
this.incSpeed = increasespeed;
this.decSpeed = decreasespeed;
this.showSpeed = showspeed;
}
functionshowCar(){
document.writeln("<br/>Model Name : "+this.carModelName);
document.writeln("<br/>Color Name : "+this.carColor);
document.writeln("<br/>Car Price : "+this.carPrice+" INR");
document.writeln("<br/>Car Speed : " + this.speed.carSpeed + " Km/h "+"<br/><br/>");
}

[190630116041] BATCH: [C]
functionincreasespeed(ispeed){
this.speed.carSpeed = ispeed;
}
functiondecreasespeed(dspeed){
this.speed.carSpeed = dspeed;
}
functionshowspeed(sspeed){
document.writeln("<br/>Car Speed : " + this.speed.carSpeed + " Km/h "+"<br/><br/>");
}
var car1 = new car("BMW 4seris", "wine red", 5000000,250);
car1.detais();
car1.incSpeed(240);
car1.detais();
car1.decSpeed(140);
car1.detais();
car1.showSpeed();
</script>
</body>
</html>
OUTPUT

[190630116041] BATCH: [C]
PRACTICAL 7
AIM: Write a JavaScript to loads and display HTML file on webpage using Asynchronous
Programming.
CODE:
<html>
<body>
<h2>JavaScript Display html file</h2>
<p id="disfile"></p>
<script>
functionmyDisplayer(some) {
document.getElementById("disfile").innerHTML = some;
}
functiongetFile(myCallback) {
letreq = new XMLHttpRequest();
req.open('GET', "html/pg2.html");
req.onload = function() {
if (req.status == 200) {
myCallback(this.responseText);
}
else {
myCallback("Error: " + req.status); }
}
req.send();
}
getFile(myDisplayer);
</script>
</body>
</html>

[190630116041] BATCH: [C]
OUTPUT

[190630116041] BATCH: [C]
PRACTICAL 8
AIM:Use Bootstrap in Practical No.1 to make webpage
Responsive.
CODE:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Practical-1</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand btnbtn-outline-warning" href="#">Information Technology</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active " aria-current="page" href="#">Home</a>
</li>
<a class="nav-link active" aria-current="page" href="#">Proffesors</a>
</li>

[190630116041] BATCH: [C]
<a class="nav-link active" aria-current="page" href="#">Photo gallary</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btnbtn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<section class="py-5 text-center container">

<div class="row py-lg-5" style="margin-top:35px;">
<div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-light">Information Technology</h1>
<p class="lead text-muted">Information Technology branch provides the knowledge about
software development,computerarchitecturew and Networking, web development ,artificial
inteligence,Cyber security etc.</p>
<p>
<a href="#" class="btnbtn-primary my-2">Photos</a>
<a href="#" class="btnbtn-secondary my-2">About us</a>
</p>
</div>
</div>
</section>

[190630116041] BATCH: [C]
<div class="album py-5 bg-light">

<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

<div class="col">
<div class="card shadow-sm">
<img class="bd-placeholder-img card-img-top" width="100%" height="225" src="hello.jpg"
role="img" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice"
focusable="false"><title>Placeholder</title><rect width="100%" height="100%"
fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em"></text>
<div class="card-body">
<p class="card-text">garba event(thanganat)</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btnbtn-smbtn-outline-secondary">View</button>
<button type="button" class="btnbtn-smbtn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<img class="bd-placeholder-img card-img-top" width="100%" height="225"
src="hello1.jpg" role="img" aria-label="Placeholder: Thumbnail"
preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect
width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%"
fill="#eceeef" dy=".3em"></text>

[190630116041] BATCH: [C]
<p class="card-text">hackathon </p>

</div>
</div>
</div>
</div>
</div>
<div class="col">
<img class="bd-placeholder-img card-img-top" width="100%" height="225"
src="hello2.jpg" role="img" aria-label="Placeholder: Thumbnail"
preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect
width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%"
fill="#eceeef" dy=".3em"></text>
<p class="card-text">sports week</p>
</div>
</div>
</div>
</div>
</div>
</div>

[190630116041] BATCH: [C]
</div>
</div>
</body>
OUTPUT(home page)

[190630116041] BATCH: [C]
Angular JS Program
Practical:1
AIM: Design Order Form with a total price updated in real time, which
contains name of five products and their prices. Create a bill amount for all
the products and calculate GST on the billing amount and display total
amount.
CODE:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@3.0.0" data-semver="3.0.0"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js@1.6.6" data-semver="1.6.6"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"
type="text/javascript"></script>
<script>
(function() {
angular.module("testApp", ['ui.bootstrap']).controller('billCtrl', ['$scope', '$http',
function($scope, $http) {
console.log("Hello World from bill");
$scope.model = undefined;
$scope.billing = [];
$scope.searchProduct = function(id) {
console.log("search");
/*$http.get('/billing/' + id).success(function(response) {
$scope.billing.push(response[0]);
});*/
$scope.billing =
[{"code":"a1","name":"Fruits","price":100,"gst":0.1},{"code":"a2","name":"Clothes","price":
33 | P a g e SUB: AWP [PRACTICALS –Angular JS Program]

[190630116041] BATCH: [C]
200,"gst":0.2},{"code":"a3","name":"Electronics","price":300,"gst":0.3},{"code":"a4","name
":"Footwear","price":400,"gst":0.4}];
}
$scope.total = function() {
//console.log($scope.model[0].qty);
var total = 0;
angular.forEach($scope.billing, function(product, index) {
total += product.total;
})
console.log(total);
return total;
}
}]);
}());
</script>
<style></style>
</head>
<body ng-app="testApp">
<div class="container" ng-controller="billCtrl">
<h1>Billing Section</h1>
<input class="form-control" ng-model="search"><br>
<button class="btnbtn-primary" ng-click="searchProduct(search)">Search Product</button>
<table class="table">
<thead>
<tr>
<th>Product Code</th>
<th>Product Name</th>
<th>Product Price</th>
<th>GST(%)</th>
<th>Quantity</th>
<th>Product Total</th>

[190630116041] BATCH: [C]
</tr>
</thead>
<tbody>
<tr ng-repeat="product in billing" ng-init="model = [{qty:1}];">
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.gst}}</td>
<td><input type="number" ng-model="model[$index].qty" ng-required class="form-control"
ng-change="product.total =
model[$index].qty?(product.price+(product.gst*product.price/100)) * model[$index].qty:0"
ng-init="product.total =
model[$index].qty?(product.price+(product.gst*product.price/100)) *
model[$index].qty:0"></td>
<td>{{product.total}}</td>
</tr>
<tr>
<td colspan="5" style="text-align:right">Gross Total</td>
<td>{{total()}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
OUTPUT :

[190630116041] BATCH: [C]

[190630116041] BATCH: [C]
PRACTICAL 2
AIM: Implement AngularJs to create your Resume.
CODE:
Main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Resume </title>
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />

<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js"
crossorigin="anonymous"></script>

<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700"
rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i"
rel="stylesheet" type="text/css" />

<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">

<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<span class="d-block d-lg-none">Krupa Patel</span>
<span class="d-none d-lg-block"><img class="img-fluid img-profile rounded-circle mx-auto
mb-2" src="assets/img/krupi.jpg" alt="" /></span>

[190630116041] BATCH: [C]
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-
icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger"
href="#experience">Experience</a></li>
href="#education">Education</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#skills">Skills</a></li>
href="#interests">Interests</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#awards">Awards</a></li>
</ul>
</div>
</nav>

<div class="container-fluid p-0">

<section class="resume-section" id="about">
<div class="resume-section-content">
<h1 class="mb-0">
Krupa
<span class="text-primary">Patel</span>
</h1>
<div class="subheading mb-5">
K.K.Street,Sunav,Petlad,Anand· 388470
<a href="mailto:name@email.com">krupsi2508@email.com</a>
</div>

[190630116041] BATCH: [C]
<p class="lead mb-5">I am experienced in leveraging agile frameworks to provide a robust

synopsis for high level overviews. Iterative approaches to corporate strategy foster
collaborative thinking to further the overall value proposition.</p>
<div class="social-icons">
<a class="social-icon" href="#"><i class="fab fa-linkedin-in"></i></a>
<a class="social-icon" href="#"><i class="fab fa-github"></i></a>
<a class="social-icon" href="#"><i class="fab fa-twitter"></i></a>
<a class="social-icon" href="#"><i class="fab fa-facebook-f"></i></a>
</div>
</div>
</section>
<hr class="m-0" />

<section class="resume-section" id="experience">
<h2 class="mb-5">Experience</h2>
<div class="d-flex flex-column flex-md-row justify-content-between mb-5">
<div class="flex-grow-1">
<h3 class="mb-0">Senior Web Developer</h3>
<div class="subheading mb-3">Intelitec Solutions</div>
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end
of the day, going forward, a new normal that has evolved from generation X is on the runway
heading towards a streamlined cloud solution. User generated content in real-time will have
multiple touchpoints for offshoring.</p>
</div>
<div class="flex-shrink-0"><span class="text-primary">March 2013 - Present</span></div>
</div>
<h3 class="mb-0">Web Developer</h3>
<div class="subheading mb-3">Intelitec Solutions</div>

[190630116041] BATCH: [C]
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
Override the digital divide with additional clickthroughs from DevOps. Nanotechnology
immersion along the information highway will close the loop on focusing solely on the
bottom line.</p>
</div>
<div class="flex-shrink-0"><span class="text-primary">December 2011 - March
2013</span></div>
</div>
<h3 class="mb-0">Junior Web Designer</h3>
<div class="subheading mb-3">Shout! Media Productions</div>
<p>Podcasting operational change management inside of workflows to establish a
framework. Taking seamless key performance indicators offline to maximise the long tail.
Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive
convergence on cross-platform integration.</p>
</div>
<div class="flex-shrink-0"><span class="text-primary">July 2010 - December
2011</span></div>
</div>
<div class="d-flex flex-column flex-md-row justify-content-between">
<h3 class="mb-0">Web Design Intern</h3>
<div class="subheading mb-3">Shout! Media Productions</div>
<p>Collaboratively administrate empowered markets via plug-and-play networks.
Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize
customer directed convergence without revolutionary ROI.</p>
</div>
<div class="flex-shrink-0"><span class="text-primary">September 2008 - June
2010</span></div>
</div>
</div>
</section>
<hr class="m-0" />

[190630116041] BATCH: [C]

<section class="resume-section" id="education">
<h2 class="mb-5">Education</h2>
<h3 class="mb-0">BBIT</h3>
<div class="subheading mb-3">Diploma</div>
<div>Information Technology</div>
<p>CGPA: 8.69</p>
</div>
<div class="flex-shrink-0"><span class="text-primary">August 2016 - May
2019</span></div>
</div>
<div class="d-flex flex-column flex-md-row justify-content-between">
<h3 class="mb-0">MBIT</h3>
<div class="subheading mb-3">Bachelor of Engineering</div>
<div>Information Technology</div>
<p>CGPA: 8.25</p>
</div>
<div class="flex-shrink-0"><span class="text-primary">August 2019 - May
2022</span></div>
</div>
</div>
</section>
<hr class="m-0" />

<section class="resume-section" id="skills">
<h2 class="mb-5">Skills</h2>

[190630116041] BATCH: [C]
<div class="subheading mb-3">Programming Languages & Tools</div>

<ul class="list-inline dev-icons">
<li class="list-inline-item"><i class="fab fa-html5"></i></li>
<li class="list-inline-item"><i class="fab fa-css3-alt"></i></li>
<li class="list-inline-item"><i class="fab fa-js-square"></i></li>
<li class="list-inline-item"><i class="fab fa-angular"></i></li>
<li class="list-inline-item"><i class="fab fa-react"></i></li>
<li class="list-inline-item"><i class="fab fa-node-js"></i></li>
<li class="list-inline-item"><i class="fab fa-sass"></i></li>
<li class="list-inline-item"><i class="fab fa-less"></i></li>
<li class="list-inline-item"><i class="fab fa-wordpress"></i></li>
<li class="list-inline-item"><i class="fab fa-gulp"></i></li>
<li class="list-inline-item"><i class="fab fa-grunt"></i></li>
<li class="list-inline-item"><i class="fab fa-npm"></i></li>
</ul>
<div class="subheading mb-3">Workflow</div>
<ul class="fa-ul mb-0">
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
Mobile-First, Responsive Design
</li>
<li>
Cross Browser Testing & Debugging
</li>
<li>
Cross Functional Teams
</li>
<li>

[190630116041] BATCH: [C]

Agile Development & Scrum
</li>
</ul>
</div>
</section>
<hr class="m-0" />

<section class="resume-section" id="interests">
<h2 class="mb-5">Interests</h2>
<p>Apart from being a web developer, I enjoy most of my time being outdoors. In the winter,
I am an avid skier and novice ice climber. During the warmer months here in Colorado, I
enjoy mountain biking, free climbing, and kayaking.</p>
<p class="mb-0">When forced indoors, I follow a number of sci-fi and fantasy genre movies
and television shows, I am an aspiring chef, and I spend a large amount of my free time
exploring the latest technology advancements in the front-end web development world.</p>
</div>
</section>
<hr class="m-0" />

<section class="resume-section" id="awards">
<h2 class="mb-5">Awards & Certifications</h2>
<ul class="fa-ul mb-0">
<li>
<span class="fa-li"><i class="fas fa-trophy text-warning"></i></span>
Google Analytics Certified Developer
</li>
<li>

[190630116041] BATCH: [C]
Mobile Web Specialist - Google Certification

</li>
<li>
1
<sup>st</sup>
AWS Cousre Completion Certification
</li>
</ul>
</div>
</section>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-
easing/1.4.1/jquery.easing.min.js"></script>

<script src="js/scripts.js"></script>
</body>
</html>
Scripts.js
(function ($) {
"use strict"; // Start of use strict
// Smooth scrolling using jQuery easing

$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
if (
location.pathname.replace(/^\//, "") ==
this.pathname.replace(/^\//, "") &&
location.hostname == this.hostname
){
var target = $(this.hash);
target = target.length

[190630116041] BATCH: [C]
? target
: $("[name=" + this.hash.slice(1) + "]");
if (target.length) {
$("html, body").animate(
{
scrollTop: target.offset().top,
},
1000,
"easeInOutExpo"
);
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked

$(".js-scroll-trigger").click(function () {
$(".navbar-collapse").collapse("hide");
});
// Activate scrollspy to add active class to navbar items on scroll

$("body").scrollspy({
target: "#sideNav",
});
})(jQuery); // End of use strict
Styles.css
https://startbootstrap.com/previews/resume
OUTPUT:

[190630116041] BATCH: [C]

[190630116041] BATCH: [C]
PRACTICAL 3
AIM: Use Practical No.01 and initialize prices to 0 ( zero) when form loads.
(use module,controller& directive)
CODE:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@3.0.0" data-semver="3.0.0"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js@1.6.6" data-semver="1.6.6"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"
type="text/javascript"></script>
<script>
(function() {
angular.module("testApp", ['ui.bootstrap']).controller('billCtrl', ['$scope', '$http',
function($scope, $http) {
console.log("Hello World from bill");
$scope.model = undefined;
$scope.billing = [];
$scope.searchProduct = function(id) {
console.log("search");
/*$http.get('/billing/' + id).success(function(response) {
$scope.billing.push(response[0]);
});*/
$scope.billing =
[{"code":"a1","name":"Fruits","price":100,"gst":0.1},{"code":"a2","name":"Clothes","price":
200,"gst":0.2},{"code":"a3","name":"Electronics","price":300,"gst":0.3},{"code":"a4","name
":"Footwear","price":400,"gst":0.4}];
}

[190630116041] BATCH: [C]
$scope.total = function() {
//console.log($scope.model[0].qty);
var total = 0;
angular.forEach($scope.billing, function(product, index) {
total += product.total;
})
console.log(total);
return total;
}
}]);
}());
</script>
<style></style>
</head>
<body ng-app="testApp">
<div class="container" ng-controller="billCtrl">
<h1>Billing Section</h1>
<input class="form-control" ng-model="search"><br>
<button class="btnbtn-primary" ng-click="searchProduct(search)">Search Product</button>
<table class="table">
<thead>
<tr>
<th>Product Code</th>
<th>Product Name</th>
<th>Product Price</th>
<th>GST(%)</th>
<th>Quantity</th>
<th>Product Total</th>
</tr>
</thead>

[190630116041] BATCH: [C]
<tbody>
<tr ng-repeat="product in billing" ng-init="model = [{qty:1}];">
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.gst}}</td>
<td><input type="number" ng-model="model[$index].qty" ng-required class="form-control"
ng-change="product.total =
model[$index].qty?(product.price+(product.gst*product.price/100)) * model[$index].qty:0"
ng-init="product.total =
model[$index].qty?(product.price+(product.gst*product.price/100)) *
model[$index].qty:0"></td>
<td>{{product.total}}</td>
</tr>
<tr>
<td colspan="5" style="text-align:right">Gross Total</td>
<td>{{total()}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

[190630116041] BATCH: [C]
OUTPUT :

[190630116041] BATCH: [C]
PRACTICAL 4
AIM: Design a webpage which takes one number as an input and generate
its factorial number (use module, controller)
CODE:
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Factorial Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js"
data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<label for="fact">Your value</label>
<input id="fact" ng-model="Value" ng-init="Value=0" /> as a factorial {{Value | factorial}}
</body>
</html>
App.js
angular.module('mainApp', [])
.controller('MainCtrl', function($scope) {
})
.filter('factorial', function() {
return function factorial(n) {
return n === 0 ?1 : n * factorial(n - 1);
}
[190630116041] BATCH: [C]
});
OUTPUT :

[190630116041] BATCH: [C]
PRACTICAL 5
AIM: Design a webpage which takes inputs product name, product

quantity and price. Generate table of entered values. When user clicks on
table column title , it should sort that column values. (use filter, array).
CODE:
Main.html
<!doctype html>
<html ng-app='myApp'>
<head>
<title>Sort the table on header click using AngularJS</title>
<link href="style.css" rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"
type='text/javascript'></script>
<script src='controller.js' type='text/javascript'></script>
</head>
<body ng-controller="myController">
<table border='1'>
<tr >
<th ng-click='sortColumn("sno")' ng-class='sortClass("sno")'>Product Code</th>
<th ng-click='sortColumn("name")' ng-class='sortClass("name")'>Product Name</th>
<th ng-click='sortColumn("age")' ng-class='sortClass("age")'>Product Price</th>
<th ng-click='sortColumn("gender")' ng-class='sortClass("gender")'>Product Quantity</th>
</tr>
<tr ng-repeat='friend in friends|orderBy:column:reverse'>
<td width='20%' align='center'>{{friend.sno}}</td>
<td width='35%' align='center'>{{friend.name}}</td>
<td width='20%' align='center'>{{friend.age}}</td>
<td width='25%' align='center'>{{friend.gender}}</td>
</tr>
</table>

[190630116041] BATCH: [C]
</body>
</html>
Style.css
*table */
table{
border-collapse: collapse;
table th,table td{
padding: 3px;
table th:hover{
cursor: pointer;
.arrow-down:after,.arrow-up:after{
content: ' ';
position: relative;
left: 2px;
border: 8px solid transparent;
.arrow-down:after{
top: 10px;
border-top-color: black;
.arrow-up:after{
bottom: 15px;
border-bottom-color: black;
.arrow-down,.arrow-up{
padding-right: 10px;
Controller.js

[190630116041] BATCH: [C]
// Module
var app = angular.module('myApp',[]);
// Controller
app.controller('myController',function($scope){
// Object
$scope.friends = [
{sno:1,name:'Shoes',age:2200,gender:'1'},
{sno:2,name:'Shirts',age:1400,gender:'2'},
{sno:3,name:'Watch',age:1800,gender:'2'},
{sno:4,name:'Wallet',age:2000,gender:'3'}
];
// column to sort
$scope.column = 'sno';
// sort ordering (Ascending or Descending). Set true for desending
$scope.reverse = false;
// called on header click
$scope.sortColumn = function(col){
$scope.column = col;
if($scope.reverse){
$scope.reverse = false;
$scope.reverseclass = 'arrow-up';
}else{
$scope.reverse = true;
$scope.reverseclass = 'arrow-down';
};
// remove and change class
$scope.sortClass = function(col){
if($scope.column == col ){
if($scope.reverse){

[190630116041] BATCH: [C]
return 'arrow-down';
}else{
return 'arrow-up';
}else{
return '';
});
OUTPUT :

[190630116041] BATCH: [C]
PRACTICAL 6
AIM :Design a webpage which display product name and product price
using AngularJS $http Service from database. Display the content in
tabular format.
CODE :
Main. Html
<!doctype html>
<html>
<head>
<title>How to get data from MySQL with AngularJS - PHP</title>
<script src="angular.min.js"></script>
</head>
<body ng-app='myapp'>
<div ng-controller="userCtrl">
<table border="1">
<tr>
<th>Product name</th>
<th>Product Price </th>
</tr>
<tr ng-repeat="user in product_details">
<td>{{user.pname}}</td>
<td>{{user.pprice}}</td>
</tr>
</table>
</div>

<script>
var fetch = angular.module('myapp', []);
fetch.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {

[190630116041] BATCH: [C]
$http({
method: 'get',
url: 'getData.php'
}).then(function successCallback(response) {
$scope.users = response.data;
});
}]);
</script>
</body>
</html>
getData.php
<?php
include 'config.php';
$sel = mysqli_query($con,"select * from product_details");
$data = array();
while ($row = mysqli_fetch_array($sel)) {
$data[] = array("pname"=>$row['pname'],"pprice"=>$row['pprice'];
echo json_encode($data);
?>
Config .php
<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "product"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die("Connection failed: " . mysqli_connect_error());

[190630116041] BATCH: [C]
?>
OUTPUT :

[190630116041] BATCH: [C]
Node JS Program
PRACTICAL 1
AIM: 1.Write a module of calculator which will perform all the basic operations like
add(),sub(),mul() and div().Use the module in a program and display the output.
CODE:
Following is Node.js Example where we create a Calculator Node.js Module

with functions add, subtract and multiply. And use the Calculator module in
another Node.js file.
// Returns addition of two numbers
exports.add = function(a, b) {
returna+b;
};
// Returns difference of two numbers

exports.subtract = function(a, b) {
returna-b;
};
// Returns product of two numbers

exports.multiply = function(a, b) {
returna*b;
};
varcalculator = require('./calculator');
vara=10, b=5;
console.log("Addition : "+calculator.add(a,b));
console.log("Subtraction : "+calculator.subtract(a,b));
console.log("Multiplication : "+calculator.multiply(a,b));
$ node moduleExample.js
Addition : 15
Subtraction : 5
Multiplication : 50
60 | P a g e SUB: AWP [PRACTICALS –Node JS Program]

[190630116041] BATCH: [C]
PRACTICAL 2
AIM: Create a program to override function.

CODE:
Example 1 – Override Function of a Node.js Module

In this example, we shall override readFile() function of Node fs module.
node-js-overriding-function-in-module.js
// include the module whose functions are to be overridden
varfs = require('fs');
// delete the function you would like to override
deletefs['readFile'];
// add new functional with the same name as deleted function
fs.readFile = function(str){
console.log("The functionality has been overridden.");
console.log(str);
}
// re-export the module for changes to take effect
module.exports = fs;
// you may use the newly overriden function
fs.readFile("sample.txt");
Open a terminal or command prompt and run this script using node command as
shown in the following.
Output
~/workspace/nodejs$ node node-js-overriding-function-in-module.js
Message from newly added function to the module
sample.txt

[190630116041] BATCH: [C]
PRACTICAL 3
AIM: Create a node js program to perform file operations like create a file,read a
file,write to file and delete a file.
CODE:
Node.js Example – Create a File

Following Node.js Example creates a file with data provided.
// include node fs module
vardata ='Learn Node FS module';
// writeFile function with filename, content and callback function

fs.writeFile('newfile.txt', data, function(err) {
if(err) throwerr;
console.log('File is created successfully.');
});
Run the program using node command in terminal or command prompt :

$ node createFileExample.js
File is created successfully.
The file should be created next to your example node.js program with the content
‘Learn Node FS module’.
Node.js Example – Read a File

// include file system module
// read file sample.html

fs.readFile('sample.html',
// callback function that is called when reading file is done
function(err, data) {
if(err) throwerr;
// data is a buffer containing file content
console.log(data.toString('utf8'))
});

$ node readFileExample.js
<html>
<body>
<h1>Header</h1>
<p>I have learnt to read a file in Node.js.</p>
</body>
</html>

[190630116041] BATCH: [C]
Node.js Example – Delete a File

make sure there is a file named ‘sample.txt’ next to the node.js example program.
// include node fs module
// delete file named 'sample.txt'

fs.unlink('sample.txt', function(err) {
if(err) throwerr;
// if no error, file has been deleted successfully
console.log('File deleted!');
});

$ node deleteFile.js
File deleted!
The file is successfully deleted.
Node.js Example – Write to a File

In this example, we shall write content, “Hello !” , to a text file sample.txt.
// include file system module
vardata = "Hello !"
// write data to file sample.html

fs.writeFile('sample.txt',data,
// callback function that is called after writing file is done
function(err) {
if(err) throwerr;
// if no error
console.log("Data is written to file successfully.")
});
When the above program is run in Terminal,

arjun@arjun-VPCEH26EN:~/workspace/nodejs$ node nodejs-write-to-file-example.js
Data is written to file successfully.

[190630116041] BATCH: [C]
PRACTICAL 4
AIM: Write a program to connect with the database.

CODE:
// include mysql module
varmysql = require('mysql');
// create a connection variable with the details required

varcon = mysql.createConnection({
host: "localhost", // ip address of server running mysql
user: "arjun", // user name to your mysql database
password: "password" // corresponding password
});
// connect to the database.

con.connect(function(err) {
if(err) throwerr;
console.log("Connected!");
});
$ node connectToMySQL.js
Connected!
NodeJS Example – SELECT FROM Table

// Node.js MySQL SELECT FROM query Example
// create a connection variable with the required details

password: "password", // corresponding password
database: "studentsDB"// use the specified database
});
// make to connection to the database.

if(err) throwerr;

[190630116041] BATCH: [C]
// if connection is successful
con.query("SELECT * FROM students", function(err, result, fields) {
// if any error while executing above query, throw error
if(err) throwerr;
// if there is no error, you have the result
console.log(result);
});
});
$ node selectFromTable.js
[ RowDataPacket{ name: 'John', rollno: 1, marks: 74 },
RowDataPacket{ name: 'Arjun', rollno: 2, marks: 74 },
RowDataPacket{ name: 'Prasanth', rollno: 3, marks: 77 },
RowDataPacket{ name: 'Adarsh', rollno: 4, marks: 78 },
RowDataPacket{ name: 'Raja', rollno: 5, marks: 94 },
RowDataPacket{ name: 'Sai', rollno: 6, marks: 84 },
RowDataPacket{ name: 'Ross', rollno: 7, marks: 54 },
RowDataPacket{ name: 'Monica', rollno: 8, marks: 86 },
RowDataPacket{ name: 'Lee', rollno: 9, marks: 98 },
RowDataPacket{ name: 'Bruce', rollno: 10, marks: 92 },
RowDataPacket{ name: 'Sukumar', rollno: 11, marks: 99 } ]
NodeJS Example – SELECT from Table with WHERE clause

We shall apply a filter based on marks and fetch only those records with marks greater
than 90.


[190630116041] BATCH: [C]

});

if(err) throwerr;
con.query("SELECT * FROM students where marks>90", function(err, result, fields) {
if(err) throwerr;
});
});
Open a terminal from the location of above .js file and run selectFromWhere.js
Node.js MySQL example program.
arjun@arjun-VPCEH26EN:~/workspace/nodejs$ node selectFromWhere.js
[ RowDataPacket{ name: 'Raja', rollno: 5, marks: 94 },
RowDataPacket{ name: 'Bruce Wane', rollno: 10, marks: 92 },
NodeJS Example – ORDER entries BY a column

An example to sort entries in ascending order w.r.t a column.


[190630116041] BATCH: [C]

});

if(err) throwerr;
con.query("SELECT * FROM students ORDER BY marks", function(err, result, fields)
{
if(err) throwerr;
});
});
Run the above Node.js MySQL ORDER BY example program.

arjun@arjun-VPCEH26EN:~/workspace/nodejs$ node AscOrderExample.js
[ RowDataPacket{ name: 'Ross', rollno: 7, marks: 54 },
RowDataPacket{ name: 'John', rollno: 1, marks: 74 },
RowDataPacket{ name: 'Arjun', rollno: 2, marks: 74 },
RowDataPacket{ name: 'Prasanth', rollno: 3, marks: 77 },
RowDataPacket{ name: 'Adarsh', rollno: 4, marks: 78 },
RowDataPacket{ name: 'Sai', rollno: 6, marks: 84 },
RowDataPacket{ name: 'Monica Gellar', rollno: 8, marks: 86 },
RowDataPacket{ name: 'Bruce Wane', rollno: 10, marks: 92 },
RowDataPacket{ name: 'Raja', rollno: 5, marks: 94 },
The records are sorted in ascending order with respect to marks column.

[190630116041] BATCH: [C]
NodeJS Example – INSERT entries INTO Table

// include mysql module Run above Node.js
varmysql = require('mysql'); MySQL program
in Terminal.
});

if(err) throwerr;
con.query("INSERT INTO students (name,rollno,marks) values
('Anisha',12,95)", function(err, result, fields) {
if(err) throwerr;
});
});
arjun@arjun-VPCEH26EN:~/workspace/nodejs$ node InsertIntoExample.js
OkPacket {
fieldCount: 0,
affectedRows: 1,
insertId: 0,
serverStatus: 2,
warningCount: 0,
message: '',

[190630116041] BATCH: [C]
protocol41: true,
changedRows: 0 }
Node.js Example – UPDATE Table Entries


});

if(err) throwerr;
con.query("UPDATE students SET marks=84 WHERE marks=74", function(err, result, fields) {
if(err) throwerr;
});
});
Run the above program in Terminal

arjun@arjun-VPCEH26EN:~/workspace/nodejs$ node UpdateRecordsFiltered.js
OkPacket {
fieldCount: 0,
affectedRows: 3,

[190630116041] BATCH: [C]
insertId: 0,
serverStatus: 34,
warningCount: 0,


});
// make connection to the database.

if(err) throwerr;
con.query("DELETE FROM students WHERE rollno>10", function(err, result, fields) {
if(err) throwerr;
});
});
arjun@arjun-VPCEH26EN:~/workspace/nodejs$ node
deleteRecordsFiltered.js
OkPacket {
fieldCount: 0,
affectedRows: 6,
insertId: 0,

[190630116041] BATCH: [C]
serverStatus: 34, message: '(Rows

matched: 3 Changed: 3
warningCount: 0, Warnings: 0',
message: '', protocol41: true,
protocol41: true, changedRows: 3 }
changedRows: 0 }
Node.js Example – DELETE Table Entries

Execute DELETE FROM query on specified table with filter applied on one or many
properties of records in the table.
Node.js Example – Using Result Object

We can access the records in Result Set as an array and properties of a record using
DOT (.) Operator.
// Node.js MySQL Result Object Example

});

if(err) throwerr;
con.query("SELECT * FROM students", function(err, result, fields) {

[190630116041] BATCH: [C]
if(err) throwerr;
// iterate for all the rows in result
Object.keys(result).forEach(function(key) {
varrow = result[key];
console.log(row.name)
});
});
});
Run the above program using node in Terminal

arjun@arjun-VPCEH26EN:~/workspace/nodejs$ node selectUseResultObject.js
John
Arjun
Prasanth
Adarsh
Raja
Sai
Ross
Monica
Lee
Bruce
Sukumar

[190630116041] BATCH: [C]
PRACTICAL 5
AIM: Write a program to parse URL Parameter.

CODE:
Node.js Example – Parse URL Parameters

// include url module
varurl = require('url');
varaddress = 'http://localhost:8080/index.php?type=page&action=update&id=5221 ';
varq = url.parse(address, true);
console.log(q.host); //returns 'localhost:8080'

console.log(q.pathname); //returns '/index.php'
console.log(q.search); //returns '?type=page&action=update&id=5221'
varqdata = q.query; // returns an object: { type: page, action: 'update',id='5221'

}
console.log(qdata.type); //returns 'page'
console.log(qdata.action); //returns 'update'
console.log(qdata.id); //returns '5221'
$ node urlParsingExample.js
localhost:8080
/index.php
?type=page&action=update&id=5221
page
update
5221

AWP Lab Manual

Uploaded by

Copyright:

Available Formats

You might also like

AWP Lab Manual

Uploaded by

Document Information

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

AWP Lab Manual

Uploaded by

Copyright:

Available Formats

[190630116041] BATCH: [C]

Madhuben and Bhanubhai Patel

1|P ag e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

Database Programming with Node JS and MongoDB

2|P ag e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

3|P ag e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

<p>Computer Engineering and Information Technology department run in a newly

<h2 align="center" class="w3-text-green"><u>About Course</u></h2>

4|P ag e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

<p>Aspiring IT professionals typically need a bachelor's degree in a technology field, such as

5|P ag e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

class="trfac"><td>Designation</td><td>: ASSISTANT PROFESSOR IT</td></tr></br>

6|P ag e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

7|P ag e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

8|P ag e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

<td>Wi-Fi enabled Department</td>

9|P ag e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

10 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

11 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

12 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

13 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

14 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

AIM: Write a JavaScript program to check if number is prime or not.

15 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

Enter the number:

16 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

AIM: Write a program to create a simple calculator using JavaScript.

17 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

18 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

<td><input type="button" class="w3-button w3-teal w3-bar"

19 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

20 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

var email = document.getElementById('email').value;

21 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

var gender = document.getElementById('myg').value;

var fcolor = document.getElementById('hobby').value;

22 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

OUTPUT: After Display

23 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

24 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

25 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

26 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

27 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

AIM:Use Bootstrap in Practical No.1 to make webpage

28 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

<section class="py-5 text-center container">

29 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

<div class="album py-5 bg-light">

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

30 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

<p class="card-text">hackathon </p>

31 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

32 | P a g e SUB: AWP [PRACTICALS - Refreshing Java Script and CSS]

33 | P a g e SUB: AWP [PRACTICALS –Angular JS Program]

34 | P a g e SUB: AWP [PRACTICALS –Angular JS Program]

35 | P a g e SUB: AWP [PRACTICALS –Angular JS Program]

36 | P a g e SUB: AWP [PRACTICALS –Angular JS Program]

AIM: Implement AngularJs to create your Resume.