Scribd
Upload
51 views

Web Programming Manual

This is a sample manual for web programming with 20 experiments in total. Includes code in html,css,js,json, jQuery, SQL,XML and php.

Uploaded by

ABBAS FAKHRUDDIN MASTER
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
51 views

Web Programming Manual

This is a sample manual for web programming with 20 experiments in total. Includes code in html,css,js,json, jQuery, SQL,XML and php.

Uploaded by

ABBAS FAKHRUDDIN MASTER
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 47

FACULTYOF ENGINEERINGAND TECHNOLOGY

BACHELOR OF TECHNOLOGY

Web ProgrammingLaboratory
(203105344)

5TH SEMESTER
ComputerScience& Engineering
DEPARTMENT

LaboratoryManual
COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3 rd YEAR ENROLLMENT NO: 210305124902.

CERTIFICATE
This is to certify that

Mr. ABBAS MASTER with Enrolment.no. 210305124902 has successfully

completed his/her laboratory experiments in the Web Programming

Laboratory (203105344) from the department of COMPUTER SCIENCE


AND ENGINEERING during the academic year 2022-2023

Date of Submission: ......................... Staff In charge: ...........................

Head of Department: ........................................


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3 rd YEAR ENROLLMENT NO: 210305124902.

TABLE OF CONTENT

Sr. Marks
Page No Date of Date of Sign
No (Out of
From To Start Completion
Experiment Title 10)

1. Create a web page containing resume


with the help of basic HTML tags.
2. Create a web page to demonstrate
working of ordered, unordered and
nested list
3. Create the following table.

4. Using Frames Divide the web page as


follows.

5. Create HTML5 web page which


shows the use of canvas.
6. Create HTML5 web page which
shows the use of Audio & Video.

7. Create a student registration form using


the following tags <form>, <input>,
<text-area>, <button>,
<select>, <option>The registration form
must consist of following information:
First Name, Middle Name, Last Name,
Gender (use radio button), Address,
Phone No., email id, Hobbies (use
checkbox), City, State, Country, College

8. Create a HTML5 web page which


shows the use of Geolocation.
COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3 rd YEAR ENROLLMENT NO: 210305124902.

9. Apply inline, internal and external style


sheet to the student registration form.
10. Implement 2D transformation on
Web page.
11. To create an html page to explain the
use of various predefined functions in
an array & Date object in JavaScript.
12. Write a Program to show use of
alert, confirm and prompt box.
13. Write JavaScript to perform the
following operations:
a. to find highest from given three
values
b. to calculate factorial of n.
14. Write JavaScript to perform the
following operations:
a. to calculate sum of 1 to n
b. to check whether given number is
palindrome or not
15. Write a Java Script program to print
current date & time
16. Create CD Catalogue Table in XML
and display it using XSL Style Sheet
17. Creating the JavaScript file to handle
our Json.
18. Write a PHP code to print your
personal details.
19. Write a PHP code to shows the use of
Decision Making and find out if given
number is prime or not prime.
20. Write a PHP code for database
connection with MySQL and also
perform Insert and Delete
COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-1

Aim: Create a web page containing resume with the help of basic HTML tags.
Code:
<html>
<head>
<title> resume</title>
</head>
<body>
<h1 style="color:red"><center>RESUME </h1>
<p><b>NAME :</b> ABBAS MASTER </p>
<p><b>AGE:</b>19</p>
<p><b>BIRTH DATE :</b> 05/12/2001</p>
<p><b>GENDER:</b>:Male
<p><b>ADDRESS:</b>Banswara,Rajasthan</p>
<p><b>CONTACT NO:</b>6375375677</p>
<p><b>EMAIL ID :</b>[email protected]</p>
<p><b>HOBBY:</b>Travelling,Playing Cricket,</p>
<p><b>LANGUAGE KNOWN:</b>HTML,C,C++,JAVA,PYTHON</p>
<h3><b>ACADEMIC PROFILE:</b><h3>
<table border="2">
<tr>
<th><b>Education</b></th>
<th><b>Board/University</b></th>
</tr>
<td><b>B.Tech</b></td>
<td>Parul University</td>
</tr>
<tr>
<th><b>HSC</b></th>
<td>CBSE</td>

<tr>
<th><b>SSC</b></th>
<td>CBSE</td>
</tr>

</table>
</body>
</html>

Output:

ENROLLMENT NUMBER: 210305124902 Page|5


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

ENROLLMENT NUMBER : 210305124902 Page|6


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-2

Aim: Create a web page to demonstrate working of ordered, unordered and


nested list.

Code:
<!DOCTYPEhtml>
<html>
<head>

<title>DifferentTypesOfListsInHTML</title>
</head>
<body>

<b>ThisisanExampleof Ordered</b>
<ol>

<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>

</ol>

<b>ThisisanExample ofUnorderedList</b>
<ul>

<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>

</ul>

<b>ThisisanExampleof NestedList</b>
<ol>

<li>Item1</li>
<ul>

<li>item1</li>
<li>item2

ENROLLMENT NUMBER: 210305124902 Page|7


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

<ul>
<li>Red</li>
<li>Yellow</li>
</ul></li>

<li>item3</li>
</ul>

<li>Item2</li>
<ul>

<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>

</ul>

</ol>

</body>
</html>
Output:

ENROLLMENT NUMBER : 210305124902 Page|8


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-3

Aim: Create the following table.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\<, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="2">
<tr>
<th colspan="4">Work Contact Points</th>
</tr>
<tr>
<td>Name</td>
<td>
<center>Email</center>
</td>
<td>Phone</td>
<td>Floor/Block</td>
</tr>
<tr>
<td bgcolor="orange">Fred</td>
<td bgcolor="lightBlue">[email protected]</td>
<td bgcolor="orange">123456</td>
<td rowspan="2" bgcolor="white">
<center>1/A</center>
</td>
</tr>
<tr>
<td bgcolor="lightBlue">Jon</td>
<td bgcolor="orange">[email protected]</td>
<td bgcolor="lightBlue">234567</td>

ENROLLMENT NUMBER: 210305124902 Page|9


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

</tr>
<tr>
<td bgcolor="orange">Bill</td>

<td bgcolor="lightBlue">[email protected]</td>
<td bgcolor="orange">345678</td>
<td rowspan="3" bgcolor="white">
<center>3/C</center>
</td>
</tr>
<tr>
<td bgcolor="lightBlue">Jane</td>
<td bgcolor="orange">[email protected]</td>
<td bgcolor="lightBlue">777444</td>
</tr>
<tr>
<td bgcolor="orange">Alison</td>
<td bgcolor="lightBlue">[email protected]</td>
<td bgcolor="orange">888652</td>
</tr>
</table>
</body>
</html>
Output:

ENROLLMENT NUMBER : 210305124902 P a g e | 10


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-4

Aim: Using Frames Divide the web page as


follows.

Code:

Frame1.html:
<html>

ENROLLMENT NUMBER: 210305124902 P a g e | 11


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

<head>
</head>
<body>
<h1>This is a Header</h1>
</body> </html>

Frame2.html:
<html>
<head>
</head>
<body>
<p>Look in the box at the right for some information</p>
</body>
</html>

Frame3.html:
<html>
<head>
</head>
<body>
<p>Here is some information</p>
</body>
</html>
<html>
<head>
</head>

<body>
<h1>This is a Footer</h1>
</body>
</html>

Frmae4.html:
<html> <head>
</head>
<body>
<h1>This is a Footer</h1>
</body>
</html>

Practical4.html:
<!DOCTYPE html>
<html>
<head>
<title>Practical-4</title>
<frameset rows = "15%,*,15%">
<frame name = "frame1" src= "frame1.html">
<frameset cols = "10%,*">

ENROLLMENT NUMBER : 210305124902 P a g e | 12


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

<frame name = "frame2" src = "frame2.html">


<frame name = "frame3" src = "frame3.html">
</frameset>
<frame name = "frame4" src = "frame4.html">
</frameset>
</head>
</html>

Output:

ENROLLMENT NUMBER: 210305124902 P a g e | 13


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-5

Aim: Create HTML5 web page which shows the use of canvas.

Code:
<html>
<head>
<title>Practical 5:Canvas</title>
</head>
<body>
<canvas id="my canvas" width="300" height="200" style="border:30px
solid #00f344; border-radius:4px ">
</canvas>
</body>
</html>

Output:

ENROLLMENT NUMBER : 210305124902 P a g e | 14


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-6

Aim: Create HTML5 web page which shows the use of Audio & Video.

Code:
<html>
<head>
<title>Audio and Video Tag</title>
</head>
<body>
<p>Audio tag</p>
<audio controls>
<source src="local desk" type="audio/mp3">
<source src="local desk" type="audio/mp3">
</audio>
<hr>
<p>Video Tag</p>
<video controls>
<source src="https://www.youtube.com/embed/kuniEyt3Qks" type="video/mp4"
height="500px" width="270px"> </video>

ENROLLMENT NUMBER: 210305124902 P a g e | 15


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

<iframe width="500px" height="270px" src="https://www.youtube.com/embed/5YDVJaItmaY"


title="YouTube video player" frameborder="2"
allow="autoplay; picture-in-picture"
allowfullscreen>
</iframe>
</body>
</html>

Output:

PRACTICAL-7

Aim:
Create a student registration form using the following tags <form>, <input>, <text-area>, <button>,
<select>, <option>The registration form must consist of following information:
First Name, Middle Name, Last Name, Gender (use radio button), Address, Phone No., email id,
Hobbies (use
checkbox), City, State, Country, College Name (use dropdown menu)

Code:
<!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>Registration
form</title>
</head>
<body>

ENROLLMENT NUMBER : 210305124902 P a g e | 16


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

<h1>Student Registration Form</h1>


<hr>
<p>Required Fields are followed by *</p>
<form>
<label for="fname">First Name: * </label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Middle Name: *</label>
<input type="text" id="mname" name="mname"><br><br>
<label for="lname">Last Name: *</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="dob">Date of Birth: *</label>
<input type="date" id="dob" name="dob"><br><br>
<label> Gender :
</label><br>
<input type="radio" name="gender" id="male" required> Male
<br>
<input type="radio" name="gender" id="female" required>
Female <br>
<input type="radio" name="gender" id="other" required>
Other<br><br>
<label for="Address">Address: *</label><br>
<textarea></textarea><br><br>
<label>Phone No: *</label>
<input type="number" name="Contact" id="Contact"><br><br>

<label>Email id: *</label>


<input type="email" name="email" id="email"><br><br>

<label>State: *</label>
<select name="State" id="div">
<option value=" ">--Select a State--</option>
<option value="GJ">Gujarat</option>
<option value="MH">Maharashtra</option>
<option value="RJ">Rajasthan</option>
</select><br><br>
<label>College Name: *</label>
<select name="State" id="div">
<option value=" ">--Select a College--</option>
<option value="PIET">PIET</option>
<option value="PIT">PIT</option>
<option value="PIAR">PIAR</option> </select><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

ENROLLMENT NUMBER: 210305124902 P a g e | 17


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

Output:

PRACTICAL-8

Aim: Create a HTML5 web page which shows the use of Geolocation.

Code:
<html>
<head>
<title>Geolocation API</title>
</head>
<body>
<button onclick="loc()">Click</button>
<script>
function loc()
{ if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(myloc); }
}
function myloc(position)

ENROLLMENT NUMBER : 210305124902 P a g e | 18


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

{ let x=position.coords.latitude;
let
y=position.coords.longitude;
alert("Latitude: "+x+" "+"Longitude: "+y);
}
</script>
</body>
</html>

Output:

PRACTICAL-9

Aim: Apply inline, internal and external style sheet to the student registration form.

Code:
<!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>Student Registration Form</title>
<style> body {
background-color:white;
margin-top: 90px;
} table
{
border: 2px solid black;

ENROLLMENT NUMBER: 210305124902 P a g e | 19


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

} #a1
{
text-align: center;
} th
{
background-color: rgba(136, 180, 216, 0.21);
} td { background-color:
rgba(173, 254, 153, 0.808);
}
}
</style>
</head>
<body>
<center>
<table border="2px">
<tr>
<th colspan="2" style="background-color:honeydew;">
<h1 style="color:darkslategray; background-color:honeydewlightBlue;">Student Registration Form</h1>
</th>
</tr>
<tr>
<th>First Name:</th>
<td>*<input type="text" placeholder="First name"
required></td>
</tr>
<tr>

<th>Last Name:</th>
<td>*<input type="text" placeholder="Last Name"
required></td>
</tr>
<tr>
<th>Enrollment Number:</th>
<td>*<input type="number" placeholder="Enrollment
No." required></td>
</tr>
<tr>
<th>Date of Birth:</th>
<td>*<input type="date" placeholder="DOB"
required></td>
</tr>
<tr>
<th>Gender:</th>
<td>*<input type="radio" name="Gender"
value="Male">Male</input>
<input type="radio" name="Gender"
value="Female">Female</input>
<input type="radio" name="Gender"
value="Others">Others</input>

ENROLLMENT NUMBER : 210305124902 P a g e | 20


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

</td>
</tr>
<tr>
<th>Address:</th>
<td>*<textarea placeholder="Address" id="add" cols="20"
rows="10"></textarea></td>
</tr>
<tr>
<th>Contact Number:</th>
<td>*<input type="number" placeholder="Contact No."
required></td>
</tr>
<tr>
<th>Email:</th>
<td>*<input type="email" placeholder="E-mail"
required></td>
</tr>
<tr>
<th>State:</th>
<td>*
<select name="State" id="div">
<option value=" ">--Select a State--</option> <option
value="GJ">Gujarat</option>
<option value="MH">Maharashtra</option>
<option value="RJ">Rajasthan</option>
<option value="MP">Andhra Pradesh</option>

</select>
</td>
</tr>
<tr>
<td id="a1" colspan="2" style="background-color:
honeydew;">
<input type="submit"></input>
<input type="reset"></input>
</td>
</tr>
</table>
</center>
</body>
</html>

Output:

ENROLLMENT NUMBER: 210305124902 P a g e | 21


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-10

Aim: Implement 2D transformation on Web page.

Code:
<html>
<head>
<title>Web programming Practical-10</title>
<style> div#h1
{ width: 200px; height:
100px; background-
color: pink; border: 1px
solid black;

ENROLLMENT NUMBER : 210305124902 P a g e | 22


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

-ms-transform: translate(50px,100px); transform:


translate(50px,100px);
} div#h2 { width: 200px;
height: 100px; background-
color: lightblue; border: 1px
solid black; -ms-transform:
rotate(20deg); transform:
rotate(20deg);
}
div#h3{ width: 200px; height: 100px; background-
color: pink; border: 1px solid black; -ms-transform:
scale(0.5,0.5); transform: scale(0.5,0.5);
}
div#h4{ width: 200px; height: 100px;
background-color: lightblue; border: 1px solid black;
-ms-transform: skew(20deg,10deg); transform: skew(20deg,10deg);
}
div#h5{ width: 200px; height: 100px; background-
color:pink; border: 1px solid black; -ms-transform:
matrix(1, -0.2, 0, 1, 0, 0); transform: matrix(1, -0.2,
0, 1, 0, 0);
}p
{
font-weight: bold;
}

div#h6{margin: 150px; width: 200px; height: 100px;


background-color: lightblue; border: 1px solid black;
-ms-transform: scaleX(2); transform: scaleX(2);
}
div#h7{ margin: 150px; width: 200px; height: 100px;
background-color: pink; border: 1px solid black; -ms-
transform: scaleY(0.5); transform: scaleY(0.5);
}
div#h8{ width: 200px; height: 100px; background-color:
lightblue; border: 1px solid black; -ms-transform:
skewX(20deg); transform: skewX(20deg);
}
div#h9{width: 200px; height: 100px; background-color:
pink; border: 1px solid black; -ms-transform: skewY(-
20deg); transform: skewY(-20deg);
}
</style>
</head>
<body>
<p>rotate</p>
<br>
<br>

ENROLLMENT NUMBER: 210305124902 P a g e | 23


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

<div id="h2">Hello</div>
<p>scale</p>
<div id="h3">Web Programming</div>
<p>skew</p>
<div id="h4">Compiler Design</div>
<p>matrix</p>
<div id="h5">Cryptography</div>
<br>
<br><p>translate</p>
<div id="h1">Programming</div>
<br>
<br>
<br>
<br>
<br>
<p>scaleX</p>
<div id="h6">Hello</div>
<p>scaleY</p>
<div id="h7">Web programming</div>
<p>skewX</p>
<div id="h8">Compiler Design</div>
<p>skewY</p>
<div id="h9">Cryptography</div>
</body>
</html>

Output:

ENROLLMENT NUMBER : 210305124902 P a g e | 24


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

ENROLLMENT NUMBER: 210305124902 P a g e | 25


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

ENROLLMENT NUMBER : 210305124902 P a g e | 26


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-11

Aim: To create an html page to explain the use of various predefined functions in an
array & Date object in JavaScript.

Code:
<!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>Array
functions</title>
</head>
<body>
<h2>Array predefined functions </h2>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<p id="demo6"></p>
<p id="demo7"></p>
<script> var arr1 = [1,2,2, 8,
4,2,2,2]; var arr2=
[3,10,21,49]; var
x=[300,100,250,350];
document.getElementById("demo1").innerHTML ="The concatenation of two array is: "+ arr1.concat(arr2);;
document.getElementById("demo2").innerHTML = arr1.pop() ;
document.getElementById("demo3").innerHTML = arr1.push(5) ;
document.getElementById("demo4").innerHTML = arr1.lastIndexOf() ;
document.getElementById("demo5").innerHTML = arr2.indexOf(20);
document.getElementById("demo6").innerHTML = arr1.reverse() ; x.sort();
document.getElementById("demo7").innerHTML = x; </script>
</body>
</html>

Output:

ENROLLMENT NUMBER: 210305124902 P a g e | 27


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

ENROLLMENT NUMBER : 210305124902 P a g e | 28


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-12

Aim:
Write a Program to show use of alert, confirm and prompt box.

Code:
<!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>Alert,Window and Prompt Box</title>
</head>
<body>
<h1>POP Up Boxes in JS</h1>
<hr>
<h3>Alert Box</h3>
<button onclick="myFunc()">Click Here</button><br><br>
<hr><br>
<h3>Window Box</h3>
<button onclick="myFunc1()">Click Here 1</button><br><br>
<p id="demo"></p>
<hr><br>
<h3>Prompt Box</h3>
<button onclick="myFunc2()">Click Here 2</button>
<p id="demo1"></p>
<hr> <script>
function myFunc() {
alert("My name is ABBAS MASTER!");
}
function myFunc1() {
var y1; if (confirm("Press a
button!")) { y1 = "You pressed
OK!";
} else {
y1 = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = y1;
} function myFunc2()
{
var person = prompt("Please enter your name", "ABBAS
MASTER"); var text;
if (person == null || person == "") {

ENROLLMENT NUMBER: 210305124902 P a g e | 29


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

text = "User cancelled the prompt.";


} else {
text = "Hello " + person + "! How are you ?";
document.getElementById("demo1").innerHTML = text; }
}
</script>
</body>
</html>
Output:

ENROLLMENT NUMBER : 210305124902 P a g e | 30


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

ENROLLMENT NUMBER: 210305124902 P a g e | 31


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-13

Aim:
Write JavaScript to perform the following operations:
a. to find highest from given three values
b. to calculate factorial of n.
Code:
Prac13(a):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Practical 13(a)</title>
</head>
<body>
<h1> Find Max of Three Numbers</h1>
<p id="demo1"></p>
<script> var a = 17,
b = 8, c = 11; if (a >
b && a > c) {
document.getElementById("demo1").innerHTML = "a is greatest";
} else if (b > a && b > c) {
document.getElementById("demo1").innerHTML = "b is greatest";
} else {
document.getElementById("demo1").innerHTML = "c is greatest";
}
</script>
</body>
</html>

Output:

Prac13(b):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Practical 13-B</title>

ENROLLMENT NUMBER : 210305124902 P a g e | 32


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

</head>
<body>
<h1> Find Factorial of a Number</h1>
<p id="demo1"></p>
<script>
var n = 7,
fact = 1; if
(n < 0) {
document.getElementById("demo1").innerHTML = "Factorial does not Exist";
} else if (n == 0) {
document.getElementById("demo1").innerHTML = "Factorial of 0 is: 1";
} else {
for (i = 1; i <= n; i++) { fact
= fact * i;
}
document.getElementById("demo1").innerHTML = "Factorial of " + n + " is: " + fact; }
</script>
</body>
</html>
Output:

ENROLLMENT NUMBER: 210305124902 P a g e | 33


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-14

Aim:
Write JavaScript to perform the following operations:
a. to calculate sum of 1 to n
b. to check whether given number is palindrome or not

Code:

Prac14(a):
<!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>Practical-14a</title>
</head>
<body>
<h1>Sum of first n integers</h1>
<hr>
<p id="demo"></p>
<button onclick="func1()">Click Me</button>
<script> function
func1() {
var n = prompt("Please enter value of n:"); var
sum = 0;
for (var i = 1; i <= n; i++) {
sum = sum + i;
}
document.getElementById("demo").innerHTML = "The sum of first " + n + " integers is: " + sum; }
</script>
</body>
</html>

Output:

ENROLLMENT NUMBER : 210305124902 P a g e | 34


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

Prac14(b):
<!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>Practical-14</title>
<!-- Write JavaScript to perform the following operations:
a. to calculate sum of 1 to n
b. to check whether given number is palindrome or not -->
<script> function Palindrome() {
var rem, temp, final = 0; var number =
Number(document.getElementById("N").value); temp =
number;
while (number > 0) { rem
= number % 10;
number = parseInt(number / 10); final = final * 10 + rem;
}
if (final == temp) {
window.alert("The input number is Palindrome");
} else
{
window.alert("The input number is not Palindrome");
}
}
</script>

</head>
<body>
<br>
<h1>Whether a number is Palindrome or not</h1>
Enter The Number :<input type="text" name="n" id="N" />
<hr color="white">
<br>
<center><button onClick="Palindrome()">CHECK</button>

ENROLLMENT NUMBER: 210305124902 P a g e | 35


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

</body>
</html>

Output:

ENROLLMENT NUMBER : 210305124902 P a g e | 36


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-15

Aim:
Write a Java Script program to print current date & time
Code:
<!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>Practical-
15</title>
</head>
<body>
<h3>Write a program to print Current Date and Time</h3>
<hr>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script> const date = new Date(); const
n = date.toDateString(); const time =
date.toLocaleTimeString();
document.getElementById("demo").innerHTML = "Date: " + n;
document.getElementById("demo1").innerHTML = "Time: " + time;
const a = date.getMonth();
document.getElementById("demo2").innerHTML = "Month: " + (a + 1);
document.getElementById("demo3").innerHTML = "Year: " +
date.getFullYear(); </script>
</body>
</html>

Output:

ENROLLMENT NUMBER: 210305124902 P a g e | 37


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-16

Aim:
Create CD Catalogue Table in XML and display it using XSL Style Sheet
Code:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="cd.xsl"?>
<catalog>
<cd>
<author> Nancy </author>
<genere> Vocal </genere>
<price> 1000$ </price>
<country> South Korea </country>
<team> Momoland </team>
</cd>
<cd>
<author> Roseanna Park </author>
<genere> Vocal </genere>
<price> 999$ </price>
<country> New Zealand </country>
<team> Blackpink </team>
</cd>
<cd>
<author> Lalisa Manoban </author>
<genere> K-pop </genere>
<price> 999$ </price>
<country> Thailand </country>
<team> Blackpink </team>
</cd>
<cd>
<author> Kim Jennie </author>
<genere> Vocal </genere>
<price> 1000$ </price>
<country> South Korea </country>
<team> Blackpink </team>
</cd>
<cd>
<author> Jisoo </author>
<genere> Lead Vocalist </genere>
<price> 1000$ </price>
<country> South Korea </country>
<team> Blackpink </team>
</cd>
<cd>
<author> Jungkook </author>

ENROLLMENT NUMBER : 210305124902 P a g e | 38


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

<genere> Vocal </genere>


<price> 998$ </price>
<country> South Korea </country>
<team> BTS </team>
</cd>
<cd>
<author> Kim Taehyung </author>
<genere> Vocal </genere>
<price> 999$ </price>
<country> South Korea </country>
<team> BTS </team>
</cd>
<cd>
<author> J-Hope </author>
<genere> Rapper </genere>
<price> 1000$ </price>
<country> South Korea </country>
<team> BTS </team>
</cd>
<cd>
<author> Suga </author>
<genere> Rapper </genere>
<price> 998$ </price>
<country> South Korea </country>
<team> BTS </team>
</cd>
<cd>
<author> Kim Nam-joon </author>
<genere> K-POP </genere>
<price> 1000$ </price>
<country> South Korea </country>
<team> BTS </team>
</cd>
</catalog>

XSL FILE:
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0"
xmlns:xsl="Transform"> <xsl:template match="/">
<html>
<body>
<h1 align="center">CD's Basic Details</h1>
<table border="3" align="center" >
<tr>
<th>Author</th>
<th>Genere</th> th>Price</th>
<th>Country</th>
<th>Team</th>

ENROLLMENT NUMBER: 210305124902 P a g e | 39


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="author"/></td>
<td><xsl:value-of select="genere"/></td>
<td><xsl:value-of select="price"/></td>
<td><xsl:value-of select="country"/></td>
<td><xsl:value-of select="team"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Output: No Output.

ENROLLMENT NUMBER : 210305124902 P a g e | 40


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-17

Aim: Creating the JavaScript file to handle our Json.

Code:
<html>
<head>
<title> Web programming Practical-17 sending data </title>
</head>
<body>
<h2>Create JSON string from a JavaScript object.</h2>
<p id="demo"></p>
<script>
var obj= { name: "HARSH", age: 20, city:"Banswara" }; var
myJSON=JSON.stringify(obj);
document.getElementById("demo").innerHTML= obj.name+" , "+obj.age+" , "+obj.city; ; </script>
</body>
</html>
Output:

ENROLLMENT NUMBER: 210305124902 P a g e | 41


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-18

Aim: Write a PHP code to print your personal details.

Code:
<?php
echo "Hi, I am ABBAS MASTER<br>"; echo "Enrollment Number :
210305124902<br>"; echo "Date of Birth : 5 Dec 2001<br>"; echo
"Right now pursuing B.tech in CSE at Parul University<br>"; echo
"Mobile Number : 6375375677<br>"; echo "Email address :
[email protected]<br>"; echo "Address :
Banswara,Rajasthan<br>"; ?>

Output:

ENROLLMENT NUMBER : 210305124902 P a g e | 42


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-19

Aim: Write a PHP code to shows the use of Decision Making and find out if
given number is prime or not prime.

Code:
<?php
function IsPrime($n)
{
for($x=2; $x<$n; $x++)
{
if($n %$x ==0)
{ return
0;
}}
return 1;
}
$a = IsPrime(5); if ($a==0) echo 'This is not a
Prime Number ..... '."\n"; else echo ' This is a Prime
Number..'."\n";
?>

Output:

ENROLLMENT NUMBER: 210305124902 P a g e | 43


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

PRACTICAL-20

Aim: Write a PHP code for database connection with MySQL and also perform Insert
and Delete.

Code:
Prac20.1:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$conn = mysqli_connect($servername, $username, $password); if
(!$conn) {
die("Sorry we failed to connect:".mysqli_connect_error());
} else
{
echo "Connection was successful <br>";
}
$sql = "CREATE DATABASE dbFruits";
$result = mysqli_query($conn, $sql); if
($result) {
echo "The db was created successfully. <br>";
} else
{
echo "The db was not created successfully because of this
error--->" . mysqli_error($conn);
}?
>
Output:

Prac20.2:

Code for Creating Table in Database:


<?php

ENROLLMENT NUMBER : 210305124902 P a g e | 44


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

$servername="localhost";
$username="root";
$password="";
$db="dbFruits";
$conn=mysqli_connect($servername,$username,$password,$db); if(!
$conn){ die("Sorry we failed to connect:".
mysqli_connect_error());
} else{
echo "Connection was successful <br>";
}
$sql="CREATE TABLE FRUITS(NAME VARCHAR(10),TYPE VARCHAR(10))";
$result=mysqli_query($conn,$sql); if($result){
echo "The Table was created successfully. <br>";
}
else{ echo "The Table was not created successfully because of this error---
>".mysqli_error($conn);
}
Output:

Prac20.3:

Code for Inserting Data into Table:


<?php
$servername="localhost";
$username="root";
$password="";
$db="dbFruits";
$conn=mysqli_connect($servername,$username,$password,$db); if(!
$conn){ die("Sorry we failed to connect:".
mysqli_connect_error());

} else{
echo "Connection was successful <br>";
}
$sql="INSERT INTO FRUITS (NAME,TYPE) VALUES
('Mango','Fruit')"; $result=mysqli_query($conn,$sql); if($result)
{ echo "The data was inserted successfully. <br>";
} else

ENROLLMENT NUMBER: 210305124902 P a g e | 45


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.-A.I. 3rd YEAR
NAME: ABBAS MASTER.

{ echo "The data was not inserted successfully because of this error---
>".mysqli_error($conn);
}

Output:

Prac20.4:

Code for Deleting Data from the Table:


<?php
$servername="localhost";
$username="root";
$password="";
$db="dbFruits";
$conn=mysqli_connect($servername,$username,$password,$db); if(!
$conn){ die("Sorry we failed to connect:". mysqli_connect_error());
} else{
echo "Connection was successful <br>";
}
$sql="DELETE FROM FRUITS WHERE NAME='Apple'";
$result=mysqli_query($conn,$sql); if($result){
echo "The Record was deleted successfully. <br>";
}
else{ echo "The Record was not deleted successfully because of this
error---
>".mysqli_error($conn);
}
?>

ENROLLMENT NUMBER : 210305124902 P a g e | 46


COMPUTER SCIENCE AND ENGINEERING
FACULTY OF ENGINEERING & TECHNOLOGY WEB PROGRAMMING (203105344) B. Tech.- A.I. 3rd YEAR
NAME: ABBAS MASTER.

Output:

ENROLLMENT NUMBER: 210305124902 P a g e | 47

You might also like