GURU NANAK DEV ENGINEERING COLLEGE

PRACTICAL FILE

Web Technologies Laboratory(PGCA -2219)

Submitted To:- Submitted By:-

Prof.Harmandeep Kaur Manvir Singh
Assistant Professor CRN:-2329013
URN:-2303299
(MCA 3rd Semester)
Batch:-2023-2025

Department Of Computer Applications

INDEX
S. Practical Page Date Sign
No No
1. Installation of Apache Tomcat Server 1-6

2. Design an XML document to store information about a 7-8

student in an engineering college.The information must
include URN,Name,Branch, Year of Joining and Email
id.Make up sample data for 3 students .Create a CSS style
sheet and use it to display thee document
3. Write an XML file which display the Book information.It 9-10
includes the following:
1) Title of book
2) Author name
3) ISBN number
4) Publisher name
5) Edition
6) Price
Write a Document Type Definition (DTD) to validate the
above XML file
4. Display the XML file created in previous program as :-The 11-14
contents should be displayed in a table .The header of the
table should be in color GRAY and the Author names
column should be displayed in one color and should be
capitalized and in bold.Use your own colors for remaining
columns.Use XML schemas XSL and CSS for the above
purpose
5. Create a script to retrieve data from a TXT file using 15-
XMLHttpRequest.

6. Create a script to retrieve data from an XML file and display 16-19
the data in an HTML table

7. Develop a script using jQuery to solve the following: 20-22

a) Limit character input in the text area including count.
b) Based on the checkbox,disable/enable the form submit
button
8. Develop a script using jQuery to solve the following: 23-25
a) Fade in and Fade out all division elements.
b) Animate an element by changing its height and width

9. Create a script to send some request to a SOAP server over 26-

HTTP
10. Create your own website using wordpress software 27-29
PROGRAM -1

Installation of Apache Tomcat Server.

Introduction:-

Apache Tomcat is an open-source web server and servlet container for Java code.
Tomcat executes programs written in the Java programming language.

Steps to Install Tomcat on Windows-

Step 1: Download Tomcat for Windows

To download the Tomcat installation file, follow the steps below:

1. Browse to the official Apache Tomcat website. Locate the Download section and
click the latest Tomcat version available. At the time of writing this article, the latest
Tomcat version was version 10.

2. On the Download page, scroll down and locate the Binary Distributions area.In
the Core list, depending on the installation type you prefer, click the download link
for the Windows Service Installer or the 32bit/64bit Windows zip file.

1
Step 2: Install Tomcat
Install Tomcat via the Windows Service Installer for an automated and wizard-guided
experience. The service installer installs the Tomcat service and runs it automatically
when the system boots.
1. Open the downloaded Windows Service Installer file to start the installation
process.
2. In the Tomcat Setup welcome screen, click Next to proceed.

2
3. Read the License Agreement and if you agree to the terms, click I Agree to proceed
to the next step.

4.In the Tomcat component selection screen, choose Full in the dropdown menu to
ensure the wizard installs the Tomcat Host Manager and Servlet and JSP examples
web applications. Alternatively, keep the default Normal installation type and
click Next.

3
5. The next step configures the Tomcat server. For instance, enter the Administrator
login credentials or choose a different connection port. When finished, click Next to
proceed to the next step.

6. The next step requires you to enter the full path to the JRE directory on your
system. The wizard auto-completes this if you have previously set up the Java
environment variables. Click Next to proceed to the next step

4
7. Choose the Tomcat server install location or keep the default one and click Install..

8. Check the Run Apache Tomcat box to start the service after the installation finishes.
Optionally, check the Show Readme box to see the Readme file. To complete the
installation, click Finish.

5
9. A popup window appears that starts the Tomcat service. After the process
completes, the window closes automatically. The Apache Tomcat web server is now
successfully installed .

6
PROGRAM -2
Design an XML document to store information about a student in an
engineering college. The information must include URN, Name,
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.

SOURCE CODE:-
STEP1:-Create an XML file named as file 1.xml

<?xml-stylesheet type="text/css" href="5.css" ?>

<!DOCTYPE HTML>
<html>
<head>
<h1> STUDENTS DESCRIPTION </h1>
</head>
<students>
<student>
<USN>USN : 3GN07CS001</USN>
<name>NAME : SANTHOSH</name>
<college>COLLEGE : GNDEC</college>
<branch>BRANCH : Computer Science and Engineering</branch>
<year>YEAR : 2007</year>
<e-mail>E-Mail : [email protected]</e-mail>
</student>
<student>
<USN>USN : 3GN07IS001</USN>
<name>NAME : MANORANJAN</name>
<college>COLLEGE : GNDEC</college>
<branch>BRANCH : Information Science and Engineering</branch>
<year>YEAR : 2007</year>
<e-mail>E-Mail : [email protected]</e-mail>
</student>
<student>
<USN>USN : 3GN07EC001</USN>
<name>NAME : CHETHAN</name>

<college>COLLEGE : GNDEC</college>
<branch>BRANCH : Electronics and Communication Engineering
</branch>
<year>YEAR : 2007</year>
<e-mail>E-Mail : [email protected]</e-mail>
</student>
</students>

</html>

7
STEP 2: Create a CSS file named as 5.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;
}
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:-

8
PROGRAM -3
Write an XML file which will display the Book information. It
includes the following:

1) Title of the book

2) Author Name
3) ISBN number
4) Publisher name
5) Edition
6) Price

Write a Document Type Definition (DTD) to validate the above

XML file.

SOURCE CODE:-

XML Code:-
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE book SYSTEM "book.dtd">
<library>
<book>
<title>Introduction to XML</title>
<author>Jane Doe</author>
<isbn>978-3-16-148410-0</isbn>
<publisher>Tech Books Publishing</publisher>
<edition>First</edition>
<price>29.95</price>
</book>
<book>
<title>Advanced XML Programming</title>
<author>John Smith</author>
<isbn>978-1-23-456789-7</isbn>
<publisher>Code World Publishing</publisher>
<edition>Second</edition>
<price>39.95</price>
</book>
<book>
<title>XML for Dummies</title>
<author>Emily Johnson</author>
<isbn>978-0-12-345678-9</isbn>
<publisher>Beginner Books</publisher>
<edition>Third</edition>
<price>19.95</price>
</book>
</library>

9
DTD CODE:-

<!ELEMENT library (book+)>

<!ELEMENT book (title, author, isbn, publisher, edition, price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT isbn (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT edition (#PCDATA)>
<!ELEMENT price (#PCDATA)>

OUTPUT:-

10
PROGRAM -4
Display the XML file created in previous program as: The
contents should be displayed in a table. The header of the table
should be in color GREY. And the Author names column should
be displayed in one color and should be capitalized and in bold.
Use your own colors for remaining columns. Use XML schemas
XSL and CSS for the above purpose.

SOURCE CODE:-

XML Code:-

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

<?xml-stylesheet type="text/xsl" href="transform.xslt"?>
<library>
<book>
<title>The Great Gatsby</title>
<author>F. Scott Fitzgerald</author>
<year>1925</year>
</book>
<book>
<title>To Kill a Mockingbird</title>
<author>Harper Lee</author>
<year>1960</year>
</book>
<book>
<title>1984</title>
<author>George Orwell</author>
<year>1949</year>
</book>
</library>

11
XSLT CODE:-

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

<xsl:stylesheet
version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<!-- Apply the template to the root element -->
<xsl:template match="/">
<html>
<head>
<title>Library Books</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<h1>Library Books</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<xsl:for-each select="library/book">
<tr>
<td><xsl:value-of select="title"/></td>
<td class="author"><xsl:value-of select="author"/></td>
<td><xsl:value-of select="year"/></td>
</tr>
</xsl:for-each>
</tbody>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

12
CSS CODE:-

/* Style the table */

table {
width: 50%;
border-collapse: collapse;
}

/* Style table headers */

thead {
background-color: grey;
}

th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}

/* Style the Author column */

.author {
color: blue; /* Use your desired color for the Author column */
font-weight: bold;
text-transform: uppercase;
}

/* Style other columns */

td {
color: brown; /* Use your desired color for other columns */
}

OUTPUT:-
13
14
PROGRAM:-5
Create a script to retrieve data from a TXT file using XML Http
Request

SOURCE CODE:-
file1.html
<!DOCTYPE html>
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<p id="demo">let AJAX change this text</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc(){
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){ if(this.r
eadyState == 4 && this.status== 200){
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET","ajax_info.txt",true);
xhttp.send();
}</script>
</body>
</html>
ajax_info.txt
<h1>AJAX</h1>
<p>AJAX is not a programming language</p>
<p>AJAX is a technique for accessing web servers from a web page</p>
<p>AJAX stands for Asynchronous Javascript And Html</p>
OUTPUT:-a)Before clicking button

15
PROGRAM:-6
Create a script to retrieve data from an XML file and display the data
in an HTML table.
SOURCE CODE:-
Employee.xml
<?xml version="1.0" encoding="utf-8"?>
<employees>
<employee id="be129">
<firstname>Jitendra</firstname>
<lastname>Kumar</lastname>
<title>Engineer</title>
</employee>
<employee id="be130">
<firstname>Amit</firstname>
<lastname>Kumar</lastname>
<title>Accountant</title>
</employee>
<employee id="be131">
<firstname>Akash</firstname>
<lastname>Kumar</lastname>
<title>Engineering Manager</title>
</employee>
<employee id="be132">
<firstname>Aishwarya</firstname>
<lastname>Kulshrestha</lastname>
<title>Engineer</title>
</employee>
<employee id="be133">
<firstname>Sachin</firstname>
<lastname>Kumar</lastname>
<title>Engineer</title>
</employee>
</employees>

16
Index.html

<!DOCTYPE html>
<head>
<title>Reads the XML data using JavaScript</title>
<!-- CSS -->
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even)
{ background-color:
#7ce2af
}
th {
background-color: #7c0f65;
color: white;
}
</style>
<!--JavaScript-->
<script>
function loadXMLDoc() {
let xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
// Request finished and response
// is ready and Status is "OK"
if (this.readyState == 4 && this.status == 200)
{empDetails(this);
}
};// employee.xml is the external xml file
xmlhttp.open("GET", "employee.xml", true);
xmlhttp.send();
17
}
function empDetails(xml)
{let i;
let xmlDoc = xml.responseXML;
let table =
`<tr><th>Firstname</th><th>Lastname</th>
<th>Title</th><th>Division</th>
<th>Building</th><th>Room</th>
</tr>`;
let x = xmlDoc.getElementsByTagName("employee");
// Start to fetch the data by using TagName
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("firstname")[0]
.childNodes[0].nodeValue + "</td><td>" +
x[i].getElementsByTagName("lastname")[0]
.childNodes[0].nodeValue + "</td><td>" +
x[i].getElementsByTagName("title")[0]
.childNodes[0].nodeValue + "</td><td>" +
</tr>";
} // Print the xml data in table form
document.getElementById("id").innerHTML = table;
}
</script>
</head>

<body>
<center>
<button type="button" class="button" onclick="loadXMLDoc()">
Get Employees Details
</button>
</center>

<br><br>
<table id="id"></table>
</body>

</html>

18
OUTPUT:-

19
PROGRAM:-7
Develop a script using jQuery to solve the following:
a) Limit character input in the text area including count.
b) Based on check box, disable/enable the form submit button
SOURCE CODE:-a)Limit character input in the text area including count
<!DOCTYPE html>
<html lang="en">
<head>
<title> How to limit character input in the textarea including count in jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script> <script>
$(document).ready(function ()
{var max_length = 25;
$('textarea').keyup(function () {
var len = max_length - $(this).val().length;
$('.c1').text(len);
})});
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
Limiting Character
</h1> <h3> How to limit character input in the textarea including count in jQuery?
</h3> <form>
<p>Maximum input characters: 25</p>
<textarea maxlength="25"></textarea>
<p> <span class="c1">25</span> Characters Remaining </p>
</form>
</body>
</html>

20
OUTPUT:-

b)Based on check box, disable/enable the form submit button

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Enable/Disable Submit Button</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
</head>
<body>
<h1>Enable/Disable Submit Button Using Checkbox</h1>
<b>Name</b>
<input type="text"><br><br>
<input id="enabled" type="checkbox" value="y" />
I accept <br>
<input id="submit-button" disabled="disabled" type="submit" value="Accept" />
<script>
$('#enabled').click(function () {
$('#submit-button').prop('disabled', !this.checked);
}); </script>
</body>
</html>

OUTPUT:-

21
22
PROGRAM:-8
Develop a script using jQuery to solve the following:
a) Fade in and fade out all division elements.
b) Animate an element, by changing its height and width
SOURCE CODE:-a)Fade in and fade out all division elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fade In and Out Divs</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
div { width: 200px; height: 100px; margin: 20px; background: lightblue; display:
none; }
</style>
</head>
<body>

<div>Div 1</div>
<div>Div 2</div>

<button id="fadeToggle">Fade In/Out</button>

<script>
$("#fadeToggle").click(() => $("div").fadeToggle(1000));
</script>
</body>
</html>

OUTPUT:-

23
b)Animate an element, by changing its height and width:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animate Size</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#animateDiv { width: 100px; height: 100px; background: lightcoral; margin: 20px; }
</style>
</head>
<body>
<div id="animateDiv"></div>
<button id="animateButton">Animate Size</button>

<script>
$("#animateButton").click(() => {
$("#animateDiv").animate({ width: "200px", height: "200px" }, 1000);
});
</script>
</body>
</html>
24
OUTPUT:-Before animating:-

After animating:-

25
PROGRAM:-9
Create a script to send some request to a SOAP Server over
HTTP.
SOURCE CODE:-
SOAP Request:-

POST /Quotation HTTP/1.0

Host: www.website.com

Content-Type: text/xml; charset = utf-8

Content-Length: 349

<?xml version = "1.0"?> <SOAP-ENV:Envelope

xmlns:SOAP-ENV = "http://www.w3.org/2001/12/soap-envelope"

SOAP-ENV:encodingStyle = "http://www.w3.org/2001/12/soap-encoding">

<SOAP-ENV:Body xmlns:m = "http://www.xyz.org/quotations"> <m:GetQuotation>

<m:QuotationsName>MiscroSoft</m:QuotationsName> </m:GetQuotation>

</SOAP-ENV:Body> </SOAP-ENV:Envelope>

OUTPUT:-
SOAP response:-
HTTP/1.0 200 OK

Content-Type: text/xml; charset = utf-8

Content-Length: nnn

<?xml version = "1.0"?>

<SOAP-ENV:Envelope

xmlns:SOAP-ENV = "http://www.w3.org/2001/12/soap-envelope"

SOAP-ENV:encodingStyle = "http://www.w3.org/2001/12/soap-encoding">

<SOAP-ENV:Body xmlns:m = "http://www.xyz.org/quotation">

<m:GetQuotationResponse>

<m:Quotation>Here is the quotation</m:Quotation> </m:GetQuotationResponse>

</SOAP-ENV:Body> </SOAP-ENV:Envelope>

26
PROGRAM:-10
Create your own website using word press software.

Step 1: Choose a Domain Name and Hosting:

 Domain Name: This is your website’s address (http://localhost/wordpress).

 Hosting Provider: This is where your website’s files will be stored. Popular
options includeBluehost, SiteGround, and HostGator.

Step 2: Install WordPress:

 Most hosting providers offer a one-click WordPress installation. Here’s how you
can do it:

 Log in to your hosting account.

 Find the WordPress installation option.

 Follow the prompts to install WordPress on your domain.

Step 3: Choose a Theme:

27
 Log in to your WordPress dashboard (http://localhost/wordpress/)

 Go to Appearance > Themes.

 Click Add New and browse through the available themes. You can also
upload a theme if youhave one.

 Install and activate your chosen theme..I have used OCEANWP theme

Step 4: Customize Your Site:

 Go to Appearance > Customize to modify your theme’s settings.

 Add your logo, change colors, and adjust the layout to fit your brand.

Step 5: Create Pages and Posts:

 Pages: Go to Pages > Add New to create static pages like Home, About, and
Contact.

 Posts: Go to Posts > Add New to create blog posts.

Step 6: Install Plugins:

Plugins add functionality to your site. Here are some essential plugins that I have installed

for creating food hub website.

 To install plugins:

 Go to Plugins > Add New.

 Search for the plugin you need.

 Click Install Now and then Activate.

28
 Ocean Extra:--Add extra features and flexibility to your OceanWP theme for a turbocharged
premium experience and full control over every aspect of your website
 WooCommerce:- An ecommerce toolkit that helps you sell anything.

 Food Store - Online Food Delivery & Pickup:-Food Store is complete online food ordering
platform with all your favourite WooCommerce functionalities.

 Elementor:-The Elementor Website Builder has it all: drag and drop page builder, pixel perfect
design, mobile responsive editing, and more.

Step 7: Optimize Your Site:

 Optimizing your WordPress site is essential for improving its performance, speed, security, and
overall user experience. A well-optimized website can lead to faster load times, higher search
engine rankings, improved user retention, and a better overall experience for visitors

Step 8: Launch Your Site:

 Once everything is set up and you’re happy with your site, it’s time to launch!
make sure to testall the features and ensure everything is working correctly.
29
30