Scribd
Upload
42 views37 pages

WDT LabPrograms

Uploaded by

Monish V
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
42 views37 pages

WDT LabPrograms

Uploaded by

Monish V
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/ 37

WEB DESIGN TECHNOLOGIES

(22CDS342)
LAB PROGRAMS
MODULE-1 (XHTML)

Laboratory Experiments:

1. Develop and demonstrate a XHTML file that creates a College web site with forms, frames, links, tables.

2. Design a Shopping web site using HTML and DHTML. Use Basic text Formatting, Images.

3. Design a Ticket Booking Web site using XHTML , Use various level of CSS.

1
MODULE-1
(XHTML)

1. Develop and demonstrate a XHTML file that creates a College web site with forms, frames, links, tables.

filename: header_frame.html
<html>
<head>
<title> Welcome page </title>
</head>

<body bgcolor="skyblue">
<marquee>
<h1 style="color:red;"> WELCOME TO NEW HORIZON</h1>
</marquee>
<center>
<p>Welcome To College Website</p>
</center>
</body>
</html>

filename: navigation_frame.html

<html>
<head>
<style>
a:link{
color: green;
}
a:visited{
color: red;
}
a:hover{
color: blue;
}
a:active{
color: yellow;
}
</style>
</head>
<body>
<center>
<H2>HOME</H2>
<H2>REGISTRATION</H2>
<A HREF="registration.html" target="_blank">CLICK HERE</A>

<H2>CONTACT US</H2>
<A HREF="contact.html" target="_blank">CLICK HERE</A>
</center>
</body>
</html>

2
filename: content_frame.html
<html>
<head>
<style>
a:link{
color: green;
}
a:visited{
color: red;
}
a:hover{
color: blue;
}
a:active{
color: yellow;
}
</style>
</head>
<body>
<h1>LIST OF BRANCHES</h1>
<ul>
<li>cse</li>
<li>ise</li>
<li>ds</li>
<a href="ds.html" target="_blank">click here</a>
<li>ec</li>
</body>
</html>

filename: registration.html
<html>
<head>
<title>Welcome</title>
</head>
<body><center>
<h1>Registraion Form</h1>
<table bgcolor="gray">
<form bgcolor="white" action="/reg.html">
<tr><td><label>Name:</label></td><td><input type="text"></td></tr></br>
<label><tr><td>Email:</td></label><td><input type="email"></td></tr></br>
<tr><td><label>Contact</label></td><td><input type="number"></td></tr>
<td><input type="submit" value="Register"></td>
<td><input type="reset" value="clear"></td>
</center>
</table>
</form>
</body>
</html>

3
filename: ds.html
<html>
<head>
<title>Class Time Table</title>
</head>
<body align="center">
<h3>WELCOME TO DATA SCIENCE DEPARTMENT</h3>
<table border="2" bgcolor="teal" align=center >
<caption >III SEM-TIMETABLE</caption>
<tr bgcolor="lightgreen">
<th>Day/Time</th>
<th>9.00-10.00</th>
<th >10.00-11.00</th>
<th >11.00-11.10</th>
<th >11.10-12.10</th>
<th >12.10-1.10</th>
<th>1.10-1.50</th>
<th >1.50-2.50</th>
<th >2.50-3.50</th>
<th >3.50-4.50</th>
</tr>
<tr>
<th>Mon</th>
<td>DS</td>
<td>DBMS</td>
<td rowspan="2" bgcolor="pink">Tea </td>
<td>WDT</td>
<td>WT</td>
<td rowspan="6" bgcolor="pink">Lunch break</td>
<td>ST</td>
<td>WT</td>
<td>Mini Prj</td>
</tr>
<tr>
<th>TUE</th>
<td>WT</td>
<td>GE</td>
<td>WT</td>
<td>WT</td>
<td>OS</td>
<td>PE</td>
<td>Mini Prj</td>
<tr>
<th>Wed</th>
<td COLSPAN =3 bgcolor="yellow"><center>WT/DB LAB BATCH1/2 </td>
<td>MATH</td>
<td>PE</td>
<td>SMS</td>
<td>ST</td>
<td>Mini Prj</td>
</tr>

4
<tr>
<th>Thur</th>
<td>OS</td>
<td>MATH</td>
<td rowspan="2" bgcolor="pink">Break</td>
<td>ST</td>
<td>MATH</td>
<td COLSPAN =3 bgcolor="yellow"><center>WT/DB LAB BATCH1/2 </td>
</tr>
<tr>
<th>Friday</th>
<td>PE</td>
<td>MATH</td>
<td>PE</td>
<td>PE</td>
<td>OS</td>
<td>PE</td>
<td>Mini Prj</td>
</tr>
</table>
</body>
</html>

OUTPUT:

5
6
2. Design a Shopping web site using HTML and DHTML. Use Basic text Formatting, Images.

filename: home.html

<html>
<head>
<title>The World of Cosmetics!</title>
</head>

<body>
<center >
<table bgcolor="skyblue" border=1>
<tr>
<td colspan="3"><h3>Welcome to <font color="red">"The World of Cosmetics
!"</font></h3></td> <td>
<form action="http://www.google.com/search" method="GET">
<input type="text" name="q" placeholder="Google Search">
<input type="submit" value="Search">
</form>
</td>
</tr>

<tr>
<td><a href="aboutUs.html">About Us </a></td>
<td><a href="home.html">Home </a></td>
<td><a href="contactUs.html">Contact Us </a></td>
<td></td>
</tr>
</table>
<br/>

<table border=1>
<tr><td><img src='img/kid.jpeg' alt='kids costume image' /></td>
<td><a href="kids.html">Kids collection</a></td></tr>

<tr><td><img src='img/men.jpeg' alt='Mens costume image' /></td>


<td><a href="mens.html">Mens collection</a></td></tr>

<tr><td><img src='img/women.jpeg' alt='Womens costume image' /></td>


<td><a href="womens.html">Womens collection</a></td></tr>
</table>

</center>
</body>
</html>

7
OUTPUT:
























8
3. Design a Ticket Booking Web site using XHTML , Use various level of CSS.

filename: bookmyshow.html
<html>
<head>
<title> Ticket Booking Web site using various level of CSS </title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<style>
h1{
color:red;
}
</style>
<script language="javascript" type="text/javascript">

function total(){
var a,b;
a=Number(document.getElementById("first_textbox").value);
b= a*100;
document.getElementById("answer").value= b;
}
</script>
</head>
<body>
<marquee><h1> Welcome to Online PVR Ticket Booking!!!</h1></marquee>
<center>

<h2 style="color:green;">Bill Particulars:</h2>


Number Of Tickets Booked : <input type="number" id="first_textbox" > <br/><br/>
<button onclick="total()">TOTAL PAYMENT</button><input type="text"
id="answer"><br/><br/>
Copyright 2023 @ BigtreeEntertainment Pvt. Ltd. All Rights Reserved.
</body>
</html>

File: style.css

body{
background-color: skyblue;
}
OUTPUT:

9
MODULE-2
(HTML-5)

Laboratory Experiments:

1. Develop and demonstrate a XHTML file with Canvas and local storage concepts.

2. Develop and demonstrate XHTML Sections.

3. Develop and demonstrate a XHTML file that creates a Computer Science Book repository website with XHTML forms.
When a user enters the specific book with an ID or Title the contents of the book to be retrieved.

1
MODULE-2
(HTML-5)

1. Develop and demonstrate a XHTML file with Canvas, local storage concepts.
2. Demonstrate XHTML Sections.

filename: 3_1a_fib.html
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor=skyblue>

<header>
<h1 align="center"><span style="color:red">User Registration Form</span></h1>
</header>

<nav>
<a href="https://www.w3schools.com/html/html5_intro.asp">HTML5 L1</a>|
<a href="https://www.tutorialspoint.com/html5/index.htm">HTML5 L2</a>|
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5">HTML5 L3</a>
</nav>

<section>
<article>
<h2> Participant Particulars</h2>
<article>
<table>
<form action="abc.php">

<tr><td>Name: </td> <td><input type="text" placeholder="eg: Alex"></td></tr>


<tr><td>Mobile: </td> <td><input type="number" placeholder="eg: 9988776655" min="9000000000" max="9999999999"
step="1"></td></tr> <!--HTML5 Input Tag-->
<tr><td>e-mailId:</td> <td><input type="email" placeholder="eg: [email protected]"></td></tr> <!--HTML5 Input Tag-->
<tr><td>Password: </td> <td><input type="password" placeholder="eg: P@&&w0rd"></td></tr>
<tr><td>Blogspot URL: </td> <td><input type="url" name="URL"></td></tr>
<tr><td>CGPA: (1 to 10) </td> <td><input type="range" name="Range" min="1" max="10" required></td></tr>
<tr><td>Login Time: </td> <td><input type="time" name="Time" min="00:00" max="23:59"></td></tr>
<tr><td></td> <td><input type="submit" value="register"></td></tr>
</form>
</table>
</section>
<section>
<h2>Events</h2>
<article>
<h3>Academic Events</h3>
<p>Includes Internal & External Assessment </p>
</article>

<article>
<h3>co-curricular Events</h3>
<p>Includes Sports & Curtural Events </p>
</article>
</section>
<aside style="font-size:larger;font-style:italic;color:red;float:right;width:130px">
I welcome Everyone!!!
<a href="http://www.google.com">click here</a>
</aside>

2
<audio controls>
<source src="Bells.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

<video width="320" height="240" controls>


<source src="Video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">


Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

<footer>
<p>Author of Post</p>
</footer>
</body>
</html>

OUTPUT:

3
3. Develop and demonstrate a XHTML file that creates a Computer Science Book repository website with XHTML forms. When a
user enters the specific book with an ID or Title the contents of the book to be retrieved.

filename: CSBR1.html

<html>
<head>
<title>Computer Science Book Repository</title>
</head>
<body>
<h1>Computer Science Book Repository</h1>

<form id="bookForm" onsubmit="retrieveBook(); return false;">


Enter Book ID:
<input type="text" id="bookId" required />

<input type="submit" value="Retrieve Book Details" />

</form>

<div id="bookDetails"></div>

<script>

function retrieveBook()
{
var book_Id = document.getElementById('bookId').value;

// Book details retrieval.


var bookDetails = getBookDetails(book_Id);

// Display the book details


displayBookDetails(bookDetails);
}

function getBookDetails(bookId) {

// For simplicity, we'll return a hardcoded object for a specific book ID.
if (bookId == '1') {
return {
title: 'Programming the World Wide Web',
author: 'RobertW.Sebesta',
content: 'This book provides a comprehensive introduction to Web Design Technologies.'
};
} else {
return {
title: 'Book Not Found',
author: 'NA',
content: 'Sorry, the book with the specified title was not found.'
};
}
}
function displayBookDetails(bookDetails) {
var detailsContainer = document.getElementById('bookDetails');
detailsContainer.innerHTML = '<h2>' +'Title: '+ bookDetails.title + '</h2>' +
'<p>Author: ' + bookDetails.author +'</p>' +
'<p>Content: ' + bookDetails.content + '</p>';
}
</script>
</body>
</html>
4
OUTPUT:

Execution with Book ID: 1

Execution with Book ID: 2

5
MODULE-3 (JAVASCRIPT)

Laboratory Experiments:

1. Develop and demonstrate a XHTML file that includes Javascript script for the following problems:

a) INPUT: A number n obtained using prompt


OUTPUT: The first n Fibonacci numbers

b) INPUT: A number n obtained using prompt


OUTPUT: A table of numbers from 1 to n and their squares using alert box.

2. a) Develop and demonstrate, using Javascript script, a XHTML document that collects the USN ( the valid format is: A
digit from 1 to 4 followed by two upper-case characters followed by two digits followed by two upper-case characters
followed by three digits; no embedded spaces allowed) of the user. Event handler must be included for the form element
that collects this information to validate the input. Messages in the alert windows must be produced when errors are
detected.

b) Modify the above program to get the current semester also (restricted to be a number from 1 to8)

3. a) Develop and demonstrate, using Javascript script, a XHTML document that contains three short paragraphs of text,
stacked on top of each other, with only enough of each showing so that the mouse cursor can be placed over some part of
them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely
visible.

b) Modify the above document so that when a paragraph is moved from the top stacking position, it returns to its original
position rather than to the bottom.

1
MODULE-3
(JAVASCRIPT)

1. Develop and demonstrate a XHTML file that includes Javascript script for the following
problems:
a) Input: A number n obtained using prompt
Output: The first n Fibonacci numbers
b) Input: A number n obtained using prompt
Output: A table of numbers from 1 to n and their squares using alert box.

filename: 3_1a_fib.html
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/XHTML11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Generate Fibonacci Numbers! </title>
</head>
<body>
<script type="text/javascript">
var fib=0, fib1=0, fib2=1;
var num=prompt("Enter the number : \n"," ");
if (num!=null && num>0)
{
document.write("<h1>Fibonacci numbers are <br/></h1>");
if (num==1)
document.write(fib1);
else
document.write(fib1 +" "+ fib2);
for (i=3; i<=num; i++)
{
fib=fib1+fib2;
document.write( " " + fib );
fib1=fib2;
fib2=fib;
}
}
else
alert("No proper input");
</script>
</body>
</html>

OUTPUT:

2
filename: 3_1b_sq_num.html
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"”http://www.w3.org/TR/XHTML11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sequence Of Number Squares! </title>
</head>
<body>

<script language="javascript" type="text/javascript"> //Script to print squares using alert box


var num=window.prompt("Enter a number : \n"," ");
var msg="Numbers and its squares are : \n";
if (num!=null && num>0){
for (i=1;i<=num;i++){
msg=msg + i +" - " + i*i +"\n" ;
//alert(msg);
}
alert(msg);
}
else
alert("No input supplied");
</script>

<script language="javascript"> //Script to print squares using a table


//input
var n=prompt("enter a number");
if(n!=null && n>0){
var i=0;
document.write("<h1>The first " + n + " numbers and their squares are: </h1>");
//display in a table
document.write("<table border=1><tr><th><b>Number</b></th><th><b>Square</b></th></tr>");
for(i=1;i<=n;i++)
document.write("<tr><td>" + i + "</td><td>" + i*i + "</td></tr>");
document.write("</table>");
}
else
alert("No input");
</script>

</body>
</html>

3
OUTPUT:

4
2. a) Develop and demonstrate, using Javascript script, a XHTML document that collects the USN ( the valid format is: A
digit from 1 to 4 followed by two upper-case characters followed by two digits followed by two upper-case characters
followed by three digits; no embedded spaces allowed) of the user. Event handler must be included for the form
element that collects this information to validate the input. Messages in the alert windows must be produced when
errors are detected.
b) Modify the above program to get the current semester also (restricted to be a number from 1 to8)

filename: 3_2a_ValidateUSN.html
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Validate USN</title>
<script>
function validate(usn){
var pattern= /^[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/ ;
if (!usn.match(pattern))
alert("USN is invalid……Please Enter again ");
else
alert("USN is valid!!!");
}
</script>
</head>
<body>
<form>
Enter USN (d[1-4]AAddAAddd) <input type=”text” name="usn" >
<input type="button" value="Validate" onclick='validate(usn.value);'>
</form>
</body>
</html>

OUTPUT:

5
filename: 3_2b_ValidateUSN&SEM.html
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/XHTML11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Validate USN & SEM</title>
<script>
function validate(usn,sem)
{
var pattern= /^[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/ ;
var pattern1= /^[1-8]$/ ;
if ( !usn.match(pattern) && !sem.match(pattern1))
alert("USN and Semester are invalid...Please Enter again ");
else if ( !usn.match(pattern) )
alert("USN is invalid!!!");
else if (!sem.match(pattern1))
alert("Semester is invalid!!!");
else
alert("Both USN and Semester are valid!!!");
}
</script>
</head>
<body>
<form>
Enter USN (d[1-4]AAddAAddd) <input type="text" name="usn" ><br/>
Enter Semester [1-8] : <input type="text" name="sem" > <br/>
<input type="button" value="Validate" onclick='validate(usn.value,sem.value);'>
</form>
</body>
</html>
OUTPUT:

6
3. a) Develop and demonstrate, using Javascript script, a XHTML document that contains three short paragraphs of
text, stacked on top of each other, with only enough of each showing so that the mouse cursor can be placed over
some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to
become completely visible.
b) Modify the above document so that when a paragraph is moved from the top stacking position, it returns to its
original position rather than to the bottom.
filename: 3_3a_StackOrder.html
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/XHTML11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Stack Ordering</title>
<!-- Define styling properties -->
<style type="text/css">
#layer1
{
border-style: solid;
border-width: thick;
border-color: black;
background-color:brown;
padding:10px;
width:300px;
height:200px;
position:absolute;
top:100px;
left:200px;
z-index:0;
}
#layer2
{
border:solid thick black;
background-color:gray;
padding:10px;
width:300px;
height:200px;
position:absolute;
top:120px;
left:220px;
z-index:0;
}
#layer3
{
border:solid thick black;
background-color:white;
padding:10px;
width:300px;
height:200px;
position:absolute;
top:140px;
left:240px;
z-index:0;
}
</style>
</head>
<body>
<script type=text/javascript>
var topLayer="layer3";
//function to place the choosen layer on the top
function mover(toTop){
document.getElementById (topLayer).style.zIndex="0";
document.getElementById(toTop).style.zIndex="1";
topLayer=toTop;
}
</script>

7
<p id=layer1 onMouseOver=mover('layer1');>This is the last layer</p>
<p id=layer2 onMouseOver=mover('layer2');>This is the middle layer</p>
<p id=layer3 onMouseOver=mover('layer3');>This is the first layer</p>
</body>
</html>

OUTPUT:

Mouse cursor on #layer1

8
filename: 3_3b_StackOrder_restore.html

<?xml version="1.0" encoding="utf-8" ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/XHTML11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>Stack Ordering with moveback


<title>Stack Ordering with moveback</title>
<!-- Define styling properties -->
<style type="text/css">

#layer1
{
border:solid thick black;
background-color:brown;
padding:10px;
width:300px;
height:200px;
position:absolute;
top:100px;
left:200px;
z-index:1;
}

#layer2
{
border:solid thick black;
background-color:gray;
padding:10px;
width:300px;
height:200px;
position:absolute;
top:120px;
left:220px;
z-index:2;
}

#layer3
{
border:solid thick black;
background-color:white;
padding:10px;
width:300px;
height:200px;
position:absolute;
top:140px;
left:240px;
z-index:3;
}

</style>

</head>

9
<body>
<script type=text/javascript>
var topLayer="layer3";
var origpos;
//function to place the choosen layer on the top
function mover(toTop,pos)
{
document.getElementById(toTop).style.zIndex="4";
topLayer=toTop;
origpos=pos;
}
//function to place the choosen layer back to it's original place
function moveBack()
{
document.getElementById(topLayer).style.zIndex=origpos;
}
</script>
<p id=layer1 onMouseOver=mover('layer1','1'); onMouseOut=moveBack()>This is the last layer</p>
<p id=layer2 onMouseOver=mover('layer2','2'); onMouseOut=moveBack()>This is the middle layer</p>
<p id=layer3 onMouseOver=mover('layer3','3'); onMouseOut=moveBack()>This is the first layer</p>
</body>
</html>

OUTPUT:

Mouse cursor on #layer1 Mouse cursor out of #layer1

10
MODULE-4 (PHP Programming)

Laboratory Experiments:

1. Write a PHP program to store current date-time in a COOKIE and display the ‘Last visited on’ date-time on the web
page upon reopening of the same page.

2. Write a PHP program to store page views count in SESSION, to increment the count on each refresh, and to show the
count on web page.

3. Write a PHP program to insert name and age information entered by the user into a table created using MySQL and
to display the current contents of this table.

1
MODULE-4
(PHP Programming)

1. Write a PHP program to store current date-time in a COOKIE and display the ‘Last visited on’ date-time on the web
page upon reopening of the same page.

filename: cookie.php

<?php
$day=1;
$x = 60*60*24*$day; // 86400 seconds in a day
setcookie( "testcookie",date("H:i A - m/d/y") , $x+time() );
//setcookie(name, value, expire);
// time() returns time elapsed in seconds from Jan 1st, 1970

if(isset($_COOKIE["testcookie"]))
{
$visit=$_COOKIE["testcookie"];
echo "Your last visit was $visit " ;
}
else
{
echo "You have got some stale cookies!";
}

?>

OUTPUT:

First execution of program

Next execution of program

2
2. Write a PHP program to store page views count in SESSION, to increment the count on each refresh, and to show the
count on web page.

filename: session.php
<?php

session_start();

if(!($_SESSION['views']))
$_SESSION['views']=1;
else
$_SESSION['views']++;

echo "<h1> No of views= $_SESSION[views] </h1>" ;

?>

OUTPUT:

3
3. Write a PHP program to insert name, email and contact information entered by the user into a table
created using MySQL and to display the current contents of this table.

filename: home.php

<html>
<head><title> Home Page!</title>
</head>

<body>

<h1>Registration & Display Form</h1>


<fieldset><legend>Registration Form</legend>
<form action=" addRecord.php " method="post">
Username: <input type="text" name="username"><br/><br/>
E-mail: <input type="email" name="email"><br/><br/>
Contact: <input type="number" name="contact"><br/><br/>
<input type="submit" value="Register">
</form>
</fieldset>

<h1>Diplay DataBase Contents </h1>


<fieldset><legend>Diplay DataBase Records</legend>
<a href="display.php">DataBase Rows</a>
</fieldset>
</body>
</html>

filename: addRecord.php

<?php
$username="root";
$password="";
$hostname = "localhost";

//connection string with database Server


$dbhandle = mysqli_connect($hostname, $username, $password)
or die("Unable to connect to MySQL ");
echo "connected to MYSQL<br/>";

// connect with database


$selected = mysqli_select_db($dbhandle, "db1")
or die("Could not select exercise DB");

echo "connected to DB";


echo "$selected";

$Name= $_POST['username'];
$Email= $_POST['email'];
$Contact= $_POST['contact'];

$sql="INSERT INTO t1(username,email,contact) VALUES ('$Name','$Email','$Contact')";


if(!mysqli_query($dbhandle, $sql))
{
echo 'Not Inserted';
}
else
{
echo "<b><br/>Inserted Data is</b>";

4
//Table starts here

// Table Code
echo "<center>";

echo "<table border='2'>";


echo "<tr><th>Name</th><th>E-Mail</th><th>Contact</th></tr>";
echo "<tr><td>$Name</td><td>$Email</td><td>$Contact</td></tr>";
echo "</center>";
//ends here
}
?>

filename: display.php

<?php
$username="root";
$password="";
$hostname = "localhost:3300";

//connection string with database Server


$dbhandle = mysqli_connect($hostname, $username, $password)
or die("Unable to connect to MySQL ");
echo "Connected to MYSQL<br/>";

// connect with database


$selected = mysqli_select_db($dbhandle, "db1")
or die("Could not select exercise DB1");

echo "Connected to DB1";


echo "$selected";

$sql="select * from t1 ";


$records=mysqli_query($dbhandle,$sql);
?>
<html>
<head>
<title>Complete Data! </title>

</head>
<body>
<table border="1" cellpadding="1" cellspacing="1">
<tr>
<th>Username</th>
<th>email</th>
<th>contact</th>
</tr>

<?php
//Fetch a result row as an associative array
while ($row=mysqli_fetch_assoc($records)){
echo "<tr>";
echo "<td>". $row["username"]."</td>";
echo "<td>". $row["email"]."</td>";
echo "<td>". $row["contact"]."</td>";
echo "</tr>";
}
?>
</table>
</body>
</html>
5
OUTPUT:

home.php

display.php

6
Addition of a Record using Registration form

7
MODULE-5 (XML)

Laboratory Experiments:

1. Design an XML document to store information about a student in an engineering college affiliated to VTU. The
information must include USN, Name, Name of the College, Branch, Year of Joining, and e-mail id. Make up sample
data for 3 students. Create a CSS style sheet and use it to display the document.

2. Create an XSLT style sheet for one student element of the above document and use it to create a display of that
element.
.

3. Demonstrate jQuery serialize() method.

1
MODULE-5
(XML)

1. Design an XML document to store information about a student in an engineering college affiliated to VTU. The
information must include USN, Name, Name of the College, Branch, Year of Joining, and e-mail id. Make up sample
data for 3 students. Create a CSS style sheet and use it to display the document.

filename: 5a.xml

<!DOCTYPE HTML>
<html>
<head>
<h1> STUDENTS DESCRIPTION </h1>
</head>
<students>
<student>
<USN>USN : 1NH22CD001</USN>
<name>NAME : AMAR</name>
<college>COLLEGE : NHCE</college>
<branch>BRANCH : CSE(DataScience)</branch>
<year>YEAR : 2022</year>
<e-mail>E-Mail : [email protected]</e-mail>
</student>
<student>
<USN>USN : 1NH22CD002</USN>
<name>NAME : BINDUSARA</name>
<college>COLLEGE: NHCE</college>
<branch>BRANCH : CSE(DataScience)</branch>
<year>YEAR : 2022</year>
<e-mail>E-Mail : [email protected]</e-mail>
</student>
<student>
<USN>USN : 1NH22CD003</USN>
<name>NAME : CHANDRAGUPTA</name>
<college>COLLEGE : NHCE</college>
<branch>BRANCH : CSE(DataScience)</branch>
<year>YEAR : 2022</year>
<e-mail>E-Mail : [email protected]</e-mail>
</student>
</students>
</html>

filename: 5a.css

student{
display:block; margin-top:10px; color:Navy;
}

USN{
display:block; margin-left:10px;font-size:14pt; color:Red;
}

name{
display:block; margin-left:20px;font-size:14pt; color:Blue;
}

college{
display:block; margin-left:20px;font-size:12pt; color:Maroon;
}

2
branch{
display:block; margin-left:20px;font-size:12pt; color:Purple;
}

year{
display:block; margin-left:20px;font-size:14pt; color:Green;
}

e-mail{
display:block; margin-left:20px;font-size:12pt; color:Blue;
}

OUTPUT:

3
2. Create an XSLT style sheet for one student element of the above document and use it to create a display of that
element.

filename: 5b.xml

<?xml version="1.0" ?>


<!-- Obtain stylesheet. Note that the xml file & xsl file should be in the same directory/location -->
<?xml-stylesheet type="text/xsl" href="5b.xsl" ?>
<student>
<info>
<usn>1NH22CD001</usn>
<name>AMAR</name>
<coll>NHCE</coll>
<branch>CSE(DS)</branch>
<yoj>2022</yoj>
<email>[email protected]</email>
</info>
</student>

filename: 5b.xsl

<?xml version="1.0"?>
<!-- create new namespace instance -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- match all -->
<xsl:template match="/student">
<html>
<!-- create table to display -->
<table border="1">
<tr>
<th>USN</th><th>Name</th><th>College</th><th>Branch</th><th>Year Of Joining</th><th>Email-ID</th>
</tr>
<xsl:for-each select="info">
<tr>
<!-- get each value -->
<td><xsl:value-of select="usn" /></td>
<td><xsl:value-of select="name" /></td>
<td><xsl:value-of select="coll" /></td>
<td><xsl:value-of select="branch" /></td>
<td><xsl:value-of select="yoj" /></td>
<td><xsl:value-of select="email" /></td>
</tr>
</xsl:for-each>
</table>
</html>
</xsl:template>
</xsl:stylesheet>

OUTPUT:

4
3. Demonstrate jQuery serialize() method.

filename: 5c.html

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").text($("form").serialize());
});
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Micheal"><br/><br/>
Last name: <input type="text" name="LastName" value="Jackson"><br/><br/>
</form>
<button>Serialize form values</button>
<div></div>
</body>
</html>

OUTPUT:

You might also like