WP Lab Manual

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.

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

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
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
<a href="https://www.google.com">Open Google</a>
</body>
</html>
Output :
6|Pa ge
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
<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
Output :
9|Pa ge
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
<th> Name </th>
<th> Email </th>
<th> Phone </th>
<th> Floor/Block </th>
</tr>
<tr bgcolor="antiquewhite">
<td> AAA </td>
<td> AAA@gmail.com </td>
<td> 123456 </td>
<td rowspan="2" bgcolor="lightgray" align="center"> 1-A </td>
</tr>
<tr >
<td> BBB </td>
<td> BBB@gmail.com </td>
<td> 234567 </td>
</tr>
<td> CCC </td>
<td> CCC@gmail.com </td>
<td> 345678 </td>
<td rowspan="3" bgcolor="orange" align="center"> 1-B </td>
</tr>
<tr >
<td> DDD </td>
<td> DDD@gmail.com </td>
<td> 456789 </td>
11 | P a g e
</tr>
<td> EEE </td>
<td> EEE@gmail.com </td>
<td> 567890 </td>
</tr>
</table>
</body>
</html>
Output :
12 | P a g e
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">
</frameset>
</frameset>
</head>
</html>
Frame1.html :
<html>
<head>
13 | P a g e
</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
<h1>This is a Footer</h1>
</body>
</html>
Output :
15 | P a g e
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
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>
</body>
</html>
Canvas3.html :
<html>
<head>
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);
17 | P a g e
aa.stroke();
</script>
</head>
<body onload = "drawShape();">
</body>
</html>
Output :
18 | P a g e
19 | P a g e
Experiment No.:6
Aim : Create a HTML5 webpage which shows the use of Audio & Video.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<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
</table>
</body>
</html>
Output :
21 | P a g e
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>
<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>
</tr>
<tr>
<td> Last Name :</td>
22 | P a g e
</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>94</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
<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
<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
Output :
26 | P a g e
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
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
Experiment No.:9
Aim : Apply inline, internal and external style-sheet for the student registration
form.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<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
<tr>
<td>First Name : </td>
</tr>
<tr>
<td> Middle Name : </td>
</tr>
<tr>
<td> Last 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
<option>94</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
<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
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
Output :
34 | P a g e
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;
-ms-transform: rotate(20deg);
transform: rotate(20deg);
div#h3{
width: 200px;
height: 100px;
35 | P a g e
-ms-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
div#h4{
width: 200px;
height: 100px;
-ms-transform: skew(20deg,10deg);
transform: skew(20deg,10deg);
div#h5{
width: 200px;
height: 100px;
background-color:pink;
-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
margin: 150px;
width: 200px;
height: 100px;
-ms-transform: scaleX(2);
transform: scaleX(2);
div#h7{
margin: 150px;
width: 200px;
height: 100px;
-ms-transform: scaleY(0.5);
transform: scaleY(0.5);
div#h8{
width: 200px;
height: 100px;
-ms-transform: skewX(20deg);
transform: skewX(20deg);
div#h9{
37 | P a g e
width: 200px;
height: 100px;
-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
<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
Output :
40 | P a g e
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
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
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
</body>
</html>
Output :
44 | P a g e
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)
else if(num3>num1 && num3>num1)
</script>
45 | P a g e
</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
Aim : B) Write Javascript to calculate factorial of n.
Code :
<html>
<head>
<title> Factorial of a Number </title>
</head>
<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
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
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>
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
</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
if(final==temp)
window.alert("The input number is Palindrome");
else
window.alert("The input number is not Palindrome");
</script>
</head>
<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
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
Output :
53 | P a g e
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>
<country> New Zealand </country>
<team> Blackpink </team>
</cd>
<cd>
<author> Lalisa Manoban </author>
<genere> K-pop </genere>
<country> Thailand </country>
54 | P a g e
</cd>
<cd>
<author> Kim Jennie </author>
</cd>
<cd>
<author> Jisoo </author>
<genere> Lead Vocalist </genere>
</cd>
<cd>
<author> Jungkook </author>
<team> BTS </team>
</cd>
<cd>
<author> Kim Taehyung </author>
55 | P a g e
<team> BTS </team>
</cd>
<cd>
<author> J-Hope </author>
<genere> Rapper </genere>
<team> BTS </team>
</cd>
<cd>
<author> Suga </author>
<genere> Rapper </genere>
<team> BTS </team>
</cd>
<cd>
<author> Kim Nam-joon </author>
<genere> K-POP </genere>
<team> BTS </team>
</cd>
</catalog>
• Code of XSL file:
56 | P a g e
<?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
Output:
58 | P a g e
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
• 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
• 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
Experiment No.:18
Aim : Write a PHP code to print your personal details.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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
• Output:
63 | P a g e
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
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);
?>
• Output:
Code for Creating Table in Database:

<?php
$username="root";
$password="";
$db="dbJay";
$conn=mysqli_connect($servername,$username,$password,$db);

}
else{
$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---
?>
Output:
• Code for Inserting Data into Table:

<?php
$username="root";
$password="";
$db="dbJay";

}
else{
$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---
?>
Output:
Database
• Code for Deleting Data from the Table:

<?php
$username="root";
$password="";
$db="dbJay";

}
else{
$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---
}
?>
• Output:

WP Lab Manual

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WP Lab Manual

Uploaded by

Copyright:

Available Formats

FACULTY OF ENGINEERING AND

Web Programming (203105354)

Date of Date of Mark

Create a webpage illustrating text formatting

Create a webpage to demonstrate working of

Create the given table.

1. Using Frames Divide the web page as

Create a HTML5 webpage which shows the use

Create a HTML5 webpage which shows the use

Create a student registration form using the

Create a HTML5 webpage which shows the use

Apply inline, internal and external style-sheet

Implement 2D transformation on webpage.

To create an HTML page to explain the use of

Write a program to show use of Alert, Confirm

a) Write a javascript to find highest from given

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

14 b) Write Javascript to check whether given

Write a Javascript program to print current date

Create CD Catalogue Table in XML and display

Creating the javascript file to handle our Json.

Write a PHP code to print your personal details.

Write a PHP code to show the use of Decision

Write a PHP code for database connection with

<title>Basic Formatting Tags</title>

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

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

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

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

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

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

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

<li> Item 1 </li>

<li> Item 2</li>

<li> Item 3 </li>

<li> Item 4</li>

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

<li> Item 1 </li>

<li> Item 2</li>

<li> Item 3 </li>

<li> Item 4</li>

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

<li> Item 1</li>

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

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

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

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

<th> Name </th>

<th> Email </th>

<th> Phone </th>

<th> Floor/Block </th>

<td> AAA </td>

<td> AAA@gmail.com </td>

<td> 123456 </td>

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

<td> BBB </td>

<td> BBB@gmail.com </td>

<td> 234567 </td>

<td> CCC </td>

<td> CCC@gmail.com </td>

<td> 345678 </td>

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