0% found this document useful (0 votes)
194 views71 pages

WP Lab Manual

The document is a laboratory manual for the subject Web Programming. It contains 20 experiments related to HTML, CSS, JavaScript, PHP, XML, and databases. The experiments cover creating basic HTML pages, using different tags and elements, working with lists, tables, frames, HTML5 features like canvas and audio/video, forms, style sheets, JavaScript functions, arrays, and objects, PHP code for decision making, connections to MySQL database, and XML with XSL.

Uploaded by

Vraj Patel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
194 views71 pages

WP Lab Manual

The document is a laboratory manual for the subject Web Programming. It contains 20 experiments related to HTML, CSS, JavaScript, PHP, XML, and databases. The experiments cover creating basic HTML pages, using different tags and elements, working with lists, tables, frames, HTML5 features like canvas and audio/video, forms, style sheets, JavaScript functions, arrays, and objects, PHP code for decision making, connections to MySQL database, and XML with XSL.

Uploaded by

Vraj Patel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 71

FACULTY OF ENGINEERING AND

TECHNOLOGY
BACHELOR OF TECHNOLOGY

Web Programming (203105354)


6TH SEMESTER
COMPUTER SCIENCE DEPARTMENT

Laboratory Manual
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

TABLE OF CONTENT

Date of Date of Mark


Sr. Experiment Title Sign
Start Complete s
No

Create a webpage illustrating text formatting


1 tags available in HTML. (i.e. <h1>, <b>, <u>,
<I>).

Create a webpage to demonstrate working of


2 ordered, unordered and nested list.

Create the given table.

1. Using Frames Divide the web page as


follows

Create a HTML5 webpage which shows the use


5 of Canvas.

Create a HTML5 webpage which shows the use


6 of Audio & Video.

Create a student registration form using the


following tags <form>, <input>, <textarea>,
<button>, <select>, <option>. The registration
7 form must consist of following information:
Firstname, Middlename, Lastname, Gender,
Address, Phone No., Email id, Hobbies, City,
State, Country, College Name.

3|Pa ge
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Create a HTML5 webpage which shows the use


8 of Geolocation.

Apply inline, internal and external style-sheet


9 for the student registration form.

Implement 2D transformation on webpage.


10

To create an HTML page to explain the use of


11
various predefined functions in an array & Date
object in Javascript.

Write a program to show use of Alert, Confirm


12 and Prompt box.

a) Write a javascript to find highest from given


three values.
13
b) Write Javascript to calculate factorial of n.

a) Write Javascript to calculate sum of 1 to n.

14 b) Write Javascript to check whether given


number is palindrome or not.

Write a Javascript program to print current date


15 & time.

Create CD Catalogue Table in XML and display


16 it using XSL Style Sheet.

Creating the javascript file to handle our Json.


17

Write a PHP code to print your personal details.


18

Write a PHP code to show the use of Decision


19
Making and find out if given number is prime or
not prime.

Write a PHP code for database connection with


20 MySQL and also perform insert and delete .

4|Pa ge
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No. : 1
Aim : Create a webpage illustrating text formatting tags available in HTML. (i.e.
<h1>, <b>, <u>, <I>).

Code :
<!DOCTYPE html>

<html>

<head>

<title>Basic Formatting Tags</title>

</head>

<body>

<h1>First Heading || Biggest</h1>

<h2>Second Heading</h2>

<h3>Third Heading</h3>

<h4>Fourth Heading</h4>

<h5>Fifth Heading</h5>

<h6>Sixth Heading || Smalllest</h6>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<b>Bold</b>

<br>

<i>Italic</i>

<br>

<u>Underline</u>

<br>

<center>This is the center tag.</center>

<br>

5|Pa ge
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

<a href="https://www.google.com">Open Google</a>

</body>

</html>

Output :

6|Pa ge
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.:2
Aim : Create a webpage to demonstrate working of ordered, unordered and
nested list.

Code :
<!DOCTYPE html>

<html>

<head>

<title> Different Types Of Lists In HTML</title>

</head>

<body>

<b>This is an Example of Ordered </b>

<ol>

<li> Item 1 </li>

<li> Item 2</li>

<li> Item 3 </li>

<li> Item 4</li>

</ol>

<b>This is an Example of Unordered List</b>

<ul>

<li> Item 1 </li>

<li> Item 2</li>

<li> Item 3 </li>

<li> Item 4</li>

</ul>

<b>This is an Example of Nested List </b>

<ol>

7|Pa ge
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

<li> Item 1</li>

<ul>

<li>item 1</li>

<li>item 2

<ul>

<li>Red</li>

<li>Green</li>

</ul></li>

<li>item 3</li>

</ul>

<li>Item 2</li>

<ul>

<li>item 1</li>

<li>item 2</li>

<li>item 3</li>

<li>item 4</li>

</ul>

</ol>

</body>

</html>

8|Pa ge
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Output :

9|Pa ge
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.:3
Aim : Create the given table.

Code :
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Practical-3 Create a Table</title>

<style>

th{

background-color: aqua;

</style>

</head>

<body>

<table border="3" width="40%">

<tr>

<th colspan="4"> Work Contact Points </th>

</tr>

<tr >

10 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

<th> Name </th>

<th> Email </th>

<th> Phone </th>

<th> Floor/Block </th>

</tr>

<tr bgcolor="antiquewhite">

<td> AAA </td>

<td> [email protected] </td>

<td> 123456 </td>

<td rowspan="2" bgcolor="lightgray" align="center"> 1-A </td>

</tr>

<tr >

<td> BBB </td>

<td> [email protected] </td>

<td> 234567 </td>

</tr>

<tr bgcolor="antiquewhite">

<td> CCC </td>

<td> [email protected] </td>

<td> 345678 </td>

<td rowspan="3" bgcolor="orange" align="center"> 1-B </td>

</tr>

<tr >

<td> DDD </td>

<td> [email protected] </td>

<td> 456789 </td>

11 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

</tr>

<tr bgcolor="antiquewhite">

<td> EEE </td>

<td> [email protected] </td>

<td> 567890 </td>

</tr>

</table>

</body>

</html>

Output :

12 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.:4
Aim : Using frames divide the webpage as follows.

Code :
Prac4.html :

<!DOCTYPE html>

<html>

<head>

<title>Prac-4</title>

<frameset rows = "15%,*,15%">

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

<frameset cols = "10%,*">

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

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

</frameset>

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

</frameset>

</head>

</html>

Frame1.html :

<html>

<head>

13 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

</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>

Frame4.html :

<html>

<head>

</head>

<body>

14 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

<h1>This is a Footer</h1>

</body>

</html>

Output :

15 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.:5
Aim : Create a HTML5 webpage which shows the use of Canvas.

Code :

Prac5.html :
<html>

<head>

<title>Prac-5</title>

</head>

<body>

<canvas id="Rectangle" width="200" height="100" style="border:1px solid red;">

Your browser does not support the HTML canvas tag.

</canvas>

</body>

</html>

Canvas2.html :
<html>

<head>

<script type = "text/javascript">

function drawShape()

var canvas = document.getElementById('Rectangle_1');

if (canvas.getContext)

var aa = canvas.getContext('2d');

aa.fillRect(25,25,100,100);

aa.clearRect(45,45,60,60);

16 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

aa.strokeRect(50,50,50,50);

aa.strokeRect(150,150,200,200);

</script>

</head>

<body onload = "drawShape();">

<canvas id = "Rectangle_0" height = "200" width ="200" style="border:1px solid black;"></canvas>

<canvas id = "Rectangle_1" height = "200" width ="200" style="border:1px solid black;"></canvas>

</body>

</html>

Canvas3.html :
<html>

<head>

<script type = "text/javascript">

function drawShape()

var canvas = document.getElementById('Rectangle_0');

if (canvas.getContext)

var aa = canvas.getContext('2d');

aa.beginPath();

aa.moveTo(45,60);

aa.quadraticCurveTo(5,5,5,12.5);

aa.quadraticCurveTo(25,80,40,90);

aa.quadraticCurveTo(40,90,100,100);

17 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

aa.quadraticCurveTo(30,30,120,120);

aa.stroke();

</script>

</head>

<body onload = "drawShape();">

<canvas id = "Rectangle_0" height = "200" width ="200" style="border:1px solid black;"></canvas>

</body>

</html>

Output :

18 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

19 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.:6
Aim : Create a HTML5 webpage which shows the use of Audio & Video.

Code :
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>video</title>

</head>

<body>

<table>

<tr>

<td> Sample Video ..... </td>

<td> <video width="400" height=" 400" controls>

<source src="S01E01.mp4">

</video></td>

</tr>

<tr>

<td> Sample Audio ....... </td>

<td>

<audio controls>

<source src="sample.mp3">

</audio>

</td>

</tr>

20 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

</table>

</body>

</html>

Output :

21 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.: 7
Aim : Create a student registration form using the following tags <form>,
<input>, <textarea>, <button>, <select>, <option>. The registration form must
consist of following information: Firstname, Middlename, Lastname, Gender,
Address, Phone No., Email id, Hobbies, City, State, Country, College Name.

Code :
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Registration Form</title>

</head>

<body>

<h1> Student Registration Form</h1>

<form>

<table>

<tr>

<td>First Name : </td>

<td> <input type="text" placeholder="Enter Your Name" name=""></td>

</tr>

<tr>

<td> Middle Name : </td>

<td> <input type="text" placeholder="Enter Your Name" name=""></td>

</tr>

<tr>

<td> Last Name :</td>

22 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

<td> <input type="text" placeholder="Enter Your Name" name=""></td>

</tr>

<tr>

<td> Gender :</td>

<td> <input type="radio" name="gender"> Male</td>

<td> <input type="radio" name="gender"> Female</td>

</tr>

<tr>

<td>Address :</td>

<td><textarea name="address" id="address" cols="20" rows="3"></textarea></td>

</tr>

<tr>

<td> Phone No. :</td>

<td> <select>

<option>91</option>

<option >92</option>

<option >93</option>

<option>94</option>

<option >95</option>

</select>

<input type="phone" placeholder="99791*****" name=""></td>

</tr>

<tr>

<td> Email :</td>

<td> <input type="mail" name="Email" placeholder="Enter Mail"></td>

</tr>

23 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

<tr>

<td>

Hobbies :

</td>

<td><input type="checkbox" name="hobby"> Cricket</td>

<td><input type="checkbox" name="hobby"> Football</td>

<td><input type="checkbox" name="hobby"> BasketBall</td>

<td><input type="checkbox" name="hobby"> Hockey</td>

</tr>

<tr>

<td> City :</td>

<td> <input type="text" name="" placeholder="Enter Your City"></td>

</tr>

<tr>

<td> State :</td>

<td> <input type="text" name=""placeholder="Enter Your State"></td>

</tr>

<tr>

<td>Country :</td>

<td>

<input type="text" name="" placeholder="Enter Your Country">

</td>

</tr>

<tr>

<td> College :

</td>

24 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

<td> <select name="college" id="">

<option value="Parul"> Parul</option>

<option value="nirma"> Nirma</option>

<option value="Subhash"> Subhash</option>

<option value="ld">LD</option>

</select></td>

</tr>

<tr>

<td><input type="submit" value="submit"> </td>

<td> <input type="reset" name="" id="" value="reset"></td>

</tr>

</table>

</form>

</body>

</html>

25 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Output :

26 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.:8
Aim : Create a HTML5 webpage which shows the use of Geolocation.

Code :
<html>

<head>

<title>Geolocation API</title>

</head>

<body>

<p><b>Find your Current location</b></p>

<button onclick="getlocation()">Click me</button>

<div id="loc"></div>

<script>

var x= document.getElementById("loc");

function getlocation()

if(navigator.geolocation)

navigator.geolocation.getCurrentPosition(showPosition)

else

alert("Sorry! your browser is not supporting")

function showPosition(position)

27 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

var x = "Current Location (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " +
position.coords.longitude + ")";

document.getElementById("loc").innerHTML = x;

</script>

</body>

</html>

Output :

28 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.:9
Aim : Apply inline, internal and external style-sheet for the student registration
form.

Code :
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Registration Form</title>

<link rel="stylesheet" href="prac7.css">

<style>

h1{

color: #e63838;

body{

margin: 20px;

padding: 20px;

</style>

</head>

<body bgcolor="#ddb8b8">

<h1> Student Registration Form</h1>

<form>

<table>

<div class="main">

29 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

<tr>

<td>First Name : </td>

<td> <input type="text" placeholder="Enter Your Name" name=""></td>

</tr>

<tr>

<td> Middle Name : </td>

<td> <input type="text" placeholder="Enter Your Name" name=""></td>

</tr>

<tr>

<td> Last Name :</td>

<td> <input type="text" placeholder="Enter Your Name" name=""></td>

</tr>

</div>

<tr>

<td> Gender :</td>

<td> <input type="radio" name="gender"> Male</td>

<td> <input type="radio" name="gender"> Female</td>

</tr>

<tr>

<td>Address :</td>

<td><textarea name="address" id="address" cols="20" rows="3"></textarea></td>

</tr>

<tr>

<td> Phone No. :</td>

<td> <select>

<option>91</option>

30 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

<option >92</option>

<option >93</option>

<option>94</option>

<option >95</option>

</select>

<input type="phone" placeholder="99791*****" name=""></td>

</tr>

<tr>

<td> Email :</td>

<td> <input type="mail" name="Email" placeholder="Enter Mail"></td>

</tr>

<tr>

<td>

Hobbies :

</td>

<td><input type="checkbox" name="hobby"> Cricket</td>

<td><input type="checkbox" name="hobby"> Football</td>

<td><input type="checkbox" name="hobby"> BasketBall</td>

<td><input type="checkbox" name="hobby"> Hockey</td>

</tr>

<tr>

<td> City :</td>

<td> <input type="text" name="" placeholder="Enter Your City"></td>

</tr>

<tr>

<td> State :</td>

31 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

<td> <input type="text" name=""placeholder="Enter Your State"></td>

</tr>

<tr>

<td>Country :</td>

<td>

<input type="text" name="" placeholder="Enter Your Country">

</td>

</tr>

<tr>

<td> College :

</td>

<td> <select name="college" id="">

<option value="Parul"> Parul</option>

<option value="nirma"> Nirma</option>

<option value="Subhash"> Subhash</option>

<option value="ld">LD</option>

</select></td>

</tr>

<tr>

<td><input type="submit" value="submit"> </td>

<td> <input type="reset" name="" id="" value="reset"></td>

</tr>

</table>

</form>

</body>

</html>

32 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Prac7.css :
body{

font-size: 22px;

h1{

text-align: center;

input[type=text], input[type=password],textarea {

width: 50%;

padding: 5px;

margin: 5px 0 22px 0;

display: block;

border: none;

background-color:white;

input[type=text]:focus,input[type=email]:focus,textarea:focus, input[type=password]:focus {

background-color: white;

outline: none;

33 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Output :

34 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.:10
Aim : Implement 2D transformation on webpage.

Code :
<html>

<head>

<title>Web programming Practical-10</title>

<style>

div#h1{

width: 200px;

height: 100px;

background-color: pink;

border: 1px solid black;

-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;

35 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

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);

font-weight: bold;

div#h6{

36 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

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{

37 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

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>

<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>

38 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

<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>

39 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Output :

40 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.:11
Aim : To create an HTML page to explain the use of various predefined functions
in an array & Date object in Javascript.

Code :
<html>

<head>

<title> Array & Object</title>

</head>

<body style="background-color:black;color:white">

<h2 style="text-align:Center;">Array and Date object</h2>

<h4>

<p> Date object</p>

<p id="demo0"></p>

<hr><br>

<p> With using loop</p>

<p id="demo1"></p>

<hr><br>

<p> Without using loop</p>

<p id="demo2"></p>

<script>

var flowers = ["Tulip", "Sunflower", "Rose", "Lotus", "Lily", "Jasmine"];

var text = "";

var i;

for (i = 0; i < flowers.length; i++) {

text += flowers[i] + "<br>";

41 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

var d = new Date();

document.getElementById("demo0").innerHTML = d;

document.getElementById("demo1").innerHTML = text;

document.getElementById("demo2").innerHTML = flowers;

</script>

</h4>

</body>

</html>

Output :

42 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.:12
Aim : Write a program to show use of Alert, Confirm and Prompt box.

Code :
<html>

<body style="background-color:black ; color:white">

<h2>Alert Message</h2>

<button onclick="myFunction()">Press this</button>

<script>

function myFunction() {

alert("ALERT BUTTON ACTICATED!");

</script>

<h2>Confirm Box</h2>

<button onclick="myFunct()">Press this</button>

<p id="demo"></p>

<script>

function myFunct() {

var txt;

if (confirm("Press a button!")) {

txt = "You pressed OK!";

} else {

txt = "You pressed Cancel!";

document.getElementById("demo").innerHTML = txt;

</script>

43 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

</body>

</html>

Output :

44 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.:13
Aim : A) Write a javascript to find highest from given three values.

Code :
<html>

<head>

<script>

function largest()

var num1, num2, num3;

num1 = Number(document.getElementById("N").value);

num2 = Number(document.getElementById("M").value);

num3 = Number(document.getElementById("O").value);

if(num1>num2 && num1>num3)

document.getElementById('rst').innerText=num1+" is large";

else if(num2>num1 && num2>num3)

document.getElementById('rst').innerText=num2+" is large";

else if(num3>num1 && num3>num1)

document.getElementById('rst').innerText=num3+" is large";

</script>

45 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

</head>

<body style="background-color:black; color:white;">

<h1>Calculate highest among three numbers</h1>

<hr color="white">

<br>

Enter 1<sup>st</sup> number: <input type="text" id="N"></input><br>

Enter 2<sup>nd</sup> number: <input type="text" id="M"></input><br>

Enter 3<sup>rd</sup> number: <input type="text" id="O"></input><br> <br>

<p id="rst"></p>

<hr color="white">

<center><button onclick="largest()">OK</button>

</body>

</html>

Output :

46 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Aim : B) Write Javascript to calculate factorial of n.

Code :
<html>

<head>

<title> Factorial of a Number </title>

</head>

<body style="background-color:black; color:white;">

<h2> Factorial of a Number using JavaScript </h2>

<h3> Enter the valid number...! </h3>

<input type = "number" min="1" id = "num">

<button type = "button" onclick = "submit()"> Submit </button>

<h3> Factorial: <span id = "answer"> </span> </h3>

<script>

// This function will get value from user and pass it to Factorial function

function submit()

var num = parseInt( document.getElementById("num").value);

if( isNaN(num) )

alert(" Enter valid number ");

return;

var factorial = calcFact(num);

document.getElementById("answer").innerHTML = factorial;

function calcFact( num )

47 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

var i;

var fact = 1;

for( i = 1; i <= num; i++ )

fact = fact * i;

return fact;

</script>

</body>

</html>

Output :

48 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.:14
Aim : A) Write Javascript to calculate sum of 1 to n.

Code :
<html>

<head>

<body>

<p>Enter Number</p>

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

<p>Sum is :</p>

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

</body>

<script type = "text/javascript">

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

var n = parseInt(num);

result = sumnaturalno(n);

window.alert("The sum of " + n + " natural number is " + result);

function sumnaturalno(n)

var i;

var sum = 0;

for(i = 1;i <= n; i++){

sum = sum + i;}

return (sum);

</script>

</head>

49 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

</html>

Output :

Aim : B) Write Javascript to check whether given number is palindrome or not.

Code :
<html>

<head>

<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;

50 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

if(final==temp)

window.alert("The input number is Palindrome");

else

window.alert("The input number is not Palindrome");

</script>

</head>

<body style="background-color:black; color:white;">

<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>

</body>

</html>

Output :

51 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.:15
Aim : Write a Javascript program to print current date & time.

Code :
<html>

<head>

</head>

<body style="background-color:rgb(216, 212, 205);">

<h1>Current Date</h1>

<p id="current_date"></p>

<hr color="black">

<h1>Current Time</h1>

<p id="current_time"></p>

<script type="text/javascript">

var today = new Date();

var date = today.getFullYear() + '-' + (today.getMonth()+1) + '-' + today.getDate();

document.getElementById("current_date").innerHTML = date;

var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

document.getElementById("current_time").innerHTML = time;

var dateTime = date+' '+time;

document.getElementById("current_dateandtime").innerHTML = dateTime;

</script>

</body>

</html>

52 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Output :

53 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.: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>

54 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

</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>

<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>

55 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

<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>

• Code of XSL file:

56 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

<?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>

</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>

57 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Output:

58 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.: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: "MINESH", age: 20, city:


"DABHOI" }; var myJSON= JSON.stringify(obj);
document.getElementById("demo").innerHTML= myJSON;

</script>

</body>

</html>

• Output:

59 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

• Code of Receiving data:


<html>

<head>

<title> Web programming Practical-17 Receiving data </title>

</head>

<body>

<h2>Create Object from JSON String.</h2>

<p id="demo"></p>

<script> var txt = '{"name":"MINESH", "age":20, "city":"DABHOI"}' var obj=


JSON.parse(txt); document.getElementById("demo").innerHTML= obj.name + ", " +
obj.age; </script>
</body>

</html>

• Output:

60 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

• Code of Storing data:


<html>

<head>

<title> Web programming Practical-17 storing data </title>

</head>

<body>

<h2>Store and retrieve data from local storage.</h2>

<p id="demo"></p>

<script> var myObj, myJSON, text,


obj;
//Storing data: myObj= { name: "MINESH", age: 20, city:
"DABHOI" }; myJSON= JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON); //Retrieving
data: text = localStorage.getItem("testJSON"); obj=
JSON.parse(text);
document.getElementById("demo").innerHTML= obj.name;

</script>

</body>

</html>

• Output:

61 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

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

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>Document</title>

</head>

<body>

<form action="" method="POST">

Name: <input type="text" name="name"> <br><br>

Enrollment no.: <input type="number" name="enno"><br><br>

Dep.: <input type="text" name="dep"><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html> <?php
if(isset($_POST['name']) && isset($_POST['enno']) && isset($_POST['dep'])){ echo
$_POST['name']."<br>"; echo $_POST['enno']."<br>"; echo $_POST['dep']."<br>";
}

?>

62 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

• Output:

63 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.:64
Aim : Write a PHP code to show 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 No:-180303105059 64 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Experiment No.:20
Aim : Write a PHP code for database connection with MySQL and also perform
insert and delete .

Code :
<?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 dbJay"; $result=mysqli_query($conn,$sql);


if($result){

echo "The db was craeted successfully. <br>";

else{ echo "The db was not craeted successfully because of this error---
>".mysqli_error($conn);

?>

Enrollment No:-180303105059 65 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

• Output:

Enrollment No:-180303105059 66 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Code for Creating Table in Database:


<?php

$servername="localhost";

$username="root";

$password="";

$db="dbJay";

$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 PERSON(NAME VARCHAR(10),ROLLNO INT(20))";

$result=mysqli_query($conn,$sql);

if($result){

echo "The Table was craeted successfully. <br>";

else{ echo "The Table was not craeted successfully because of this error---
>".mysqli_error($conn);

?>

Enrollment No:-180303105059 67 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Output:

Enrollment No:-180303105059 68 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

• Code for Inserting Data into Table:


<?php

$servername="localhost";

$username="root";

$password="";

$db="dbJay";

$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 PERSON (NAME,ROLLNO) VALUES

('Jay','180303105059')"; $result=mysqli_query($conn,$sql);
if($result){

echo "The data was craeted successfully. <br>";

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

?>

Enrollment No:-180303105059 69 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

Output:

Database

Enrollment No:-180303105059 70 | P a g e
Faculty of Engineering & Technology
Subject Name: Web Programming
Subject Code: 203105354
B.Tech : CSE, Year : 3, Semester : 6

• Code for Deleting Data from the Table:


<?php

$servername="localhost";

$username="root";

$password="";

$db="dbJay";

$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 PERSON WHERE NAME='Jay'";

$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);
}

?>

• Output:

Enrollment No:-180303105059 71 | P a g e

You might also like