NANDHA COLLEGE OF TECHNOLOGY

ERODE-638 052

DEPARTMENT OF INFORMATION TECHNOLOGY

IT3401 – WEB ESSENTIALS LABORATORY MANUAL

(Regulations 2021)

FOURTH SEMESTER

(ACADEMIC YEAR 2024-25)

 Version 1

NANDHA COLLEGE OF TECHNOLOGY

ERODE-638 052

DEPARTMENT OF INFORMATION TECHNOLOGY

IT3401 – WEB ESSENTIALS LABORATORY MANUAL

(Regulations 2021)

FOURTH SEMESTER

(ACADEMIC YEAR 2024-25)

Prepared By Approved By
VISION OF THE INSTITUTE

To be a Technical Institution with Global standard of

Academic and Research for the need of Society and Industry.

MISSION OF THE INSTITUTE

● To provide value based technical education to produce quality

professionals and responsible citizens.

● To perform state of art research and develop products to

contribute to the Society and Nation.

VISION OF THE DEPARTMENT

● To be a centre of excellence in the field of Information

Technology with Global standards of Academic and Research

for the need of Society and Industry.

MISSION OF THE DEPARTMENT

● To provide value based Information Technology education and

produce innovative, competent and high quality IT

professionals for the growing demand of Society and Industry.

● To facilitate the students for the constant up gradation of

Technical expertise and perform research activities to solve the

real world problems.

Program Outcomes (POs)

PO1: Engineering knowledge: Apply the knowledge of mathematics,

science, engineering fundamentals, and an engineering specialization to
the solution of complex engineering problems.
PO2: Problem analysis: Identify, formulate, review research literature,
and analyze complex engineering problems reaching substantiated
conclusions using first principles of mathematics, natural sciences, and
engineering sciences.
PO3: Design/development of solutions: Design solutions for complex
engineering problems and design system components or processes that
meet the specified needs with appropriate consideration for the public
health and safety and the cultural, societal and environmental
considerations.
PO4: Conduct investigations of complex problems:Use research-
based knowledge and research methods including design of experiments,
analysis and interpretation of data, and synthesis of the information to
provide valid conclusions.
PO5: Modern Toolusage:Create, select, and apply appropriate
techniques, resources, and modern engineering and IT tools including
prediction and modeling to complex engineering activities with an
understanding of thelimitations.
PO6: The engineer and society: Apply reasoning informed by the
contextual knowledge to assess societal, health, safety, legal and cultural
issues and the consequent responsibilities relevant to the professional
engineering practice.
PO7: Environment and sustainability: Understand the impact of the
professional engineering solutions in societal and environmental contexts,
and demonstrate the knowledgeof,andneedforsustainabledevelopment.
PO8: Ethics: Apply ethical principles and commit to professional ethics
and responsibilities and norms of the engineering practice.
PO9: Individual and team work: Function effectively as an individual,
and as a member or leader in diverse teams, and in multidisciplinary
settings.
PO10:Communication:Communicate effectively on complex
engineering activities with the engineering community and with society at
large, such as, being able to comprehend and write effective reports and
design documentation, make effective presentations, and give and receive
clear instructions.
PO11: Project management and finance: Demonstrate knowledge and
understanding of the engineering and management principles and apply
these to one‘s own work, as a member and leader in a team, to manage
projects and in multidisciplinary environments.
PO12: Life-long learning: Recognize the need for, and have the
preparation and ability to engage in independent and life-long learning in
the broadest context of technological change.

Program Specific Outcomes (PSOs)

PSO1: Have proficiency in programming skills to design, develop and apply
appropriate techniques, to solve complex engineering problems.
PSO2: Have knowledge to build, automate and manage business solutions
using cutting edge technologies.
PSO3: Have excitement towards research in applied computer
technologies.

Program Educational Objectives (PEOs)

PEO1: To ensure graduates from Information Technology will be
provided enough chances in utilizing the fundamental knowledge of basic
sciences, mathematics and Information Technology to be proficient in
applications relevant streams of Engineering and Technology.
PEO2: To enrich graduates from Information Technology with the core
competencies necessary for applying knowledge in computers and
telecommunications equipment to store, retrieve, transmit, manipulate
and analyze data in the context of business enterprise.
PEO3: To enable graduates from Information Technology to think
logically, pursue lifelong learning and to have the capacity to understand
technical issues related to computing systems and also to design optimal
solutions.
PEO4: To enable graduates from Information Technology to develop
hardware and software systems by understanding the needs of social,
business and ecology accordance with human context.
PEO5: To enable graduates from Information Technology to gain
employment in organizations and establish themselves as accomplished
professionals by applying their technical skills to solve the real world
problems and meet the diversified needs of industry,academia and
research.
 LIST OF EXPERIMENTS

1.CREATION OF INTERACTIVE WEB SITES.

2. CLIENT SIDE SCRIPTS FOR VALIDATING WEB FORM CONTROLS USING
DHTML
3.CREATION OF SIMPLE PHP PROGRAM TO PRINT SUM OF DIGITS
4. HANDLING MULTIMEDIA CONTENT IN WEB SITES.
5. SERVLET.
6.CREATION OF INFORMATION RETRIEVAL SYSTEM USING WEB, PHP
AND MYSQL.
7.CREATION OF PERSONAL INFORMATION SYSTEM PROGRAM USING
WEB SERVICE AND DATABASE.

TOTAL: 30 PERIODS

.
Course Outcomes:

CO1 Apply fundamental concepts to create a website.

CO2 Apply JavaScript, HTML and CSS effectively to create interactive
and dynamic websites.
CO3 Design and deploy simple web-applications.
CO4 Create simple PHP scripts
CO5 Create simple database applications.

CO’s-PO’s & PSO’s MAPPING:

 INDEX

Ex. No Experiment Page. No

CREATION OF INTERACTIVE WEB SITES.

1 CASCADING STYLE SHEETS:

1.1 INLINE STYLE SHEET
1.2 EMBEDDED STYLE SHEET
1.3 EXTERNAL STYLE SHEET
CLIENT SIDE SCRIPTS FOR VALIDATING WEB FORM
2 CONTROLS USING DHTML.

CREATION OF SIMPLE PHP PROGRAM TO PRINT SUM OF

3 DIGITS
HANDLING MULTIMEDIA CONTENT IN WEB
4
SITES
SERVLET:
5.1 A JAVA PROGRAM TO INVOKE SERVLETS FROM HTML
FORMS
5
5.2 SESSION TRACKING USING HIDDEN FORM
FIELDS AND SESSION TRACKING FOR A HIT COUNT

6 CREATION OF INFORMATION RETRIEVAL SYSTEM USING WEB,

PHP AND MYSQL

CREATION OF PERSONAL INFORMATION SYSTEM PROGRAM

7 USING WEB SERVICE
AND DATABASE

CONTENT BEYOND SYLLABUS

1 Create a webpage for the company homepage

Ex.No: 1 CREATION OF INTERACTIVE WEB SITE
Date:

Aim:
To create a webpage with the following using HTML
• To embed an image in web page
• To fix the hot spots.
• Show all the related information when a hot spot is clicked in the map
Algorithm:
Step1: Create a html file with map tag.
Step2: Set the source attribute of the img tag to the location of the image and also set the use
map attribute.
Step3: Specify an area with name, shape and href set of the appropriate value.
Step4: Repeat step3 as many hot spots you want to put in the map.
Step5: Create html file for each and every hot spots the user will select the particular location it
shows information about it.
Program:
Solarsystem.Html
<html>
<head>
<title>solar system</title>
</head>
<body>
<img src="p1.jpg" width="600" height="500" usemap="#metroid" ismap="ismap" >
<map name ="metroid" id="metroid">
<area href ="Mercury.html" shape = "rect" coords = "100,400,150,450" title = "Mercury
planet" />
<area href ="venus.html" shape = "poly" coords = "150, 415,
175,348,265,360,190,420,190,440"
title ="venus planet"/>
<area href ='earth.html' shape='circle' coords='175,495,180' title='Earth planet'/>
<area href ='mars.html' shape='circle' coords='175,495,230' title='Mars planet'/>
</map>
</body>
</html>

MERCURY.HTML
<html>
<head>
<title>about mercury</title>
</head>
<body>
<center> <h1>mercury planet</h1> </center>
<p>Mercury is the innermost and smallest planet in the Solar System,orbiting the Sun once every 87.969
Earth days.The orbit of Mercury has the highest eccentricity of all the Solar System planets, and it has the
smallest axial tilt.It completes three rotations about its axis for every two orbits.The perihelion of
Mercury's orbit precesses around the Sun at an excess of 43 arcseconds per century; a phenomenon that
was explained in the 20th century by Albert Einstein's General Theory of Relativity.
</p>
<a href='solarsystem.html'>solar planet</a>
</body>
</html>
1
 VENUS.HTML
<html>
<head>
<title>about mercury</title>
</head>
<body>
<center> <h1>venus planet</h1> </center>
<p>
venus is the second planet from the sun and the sixth largest. venus' orbit is the most nearly
circular of that of any planet, with an eccentricity of less than 1%. orbit: 108,200,000 km (0.72 au)
from sun diameter: 12,103.6 km mass: 4.869e24 kg venus has been known since prehistoric times. it
is the brightest object in the sky except for the sun and the moon.
</p>
<a href='solarsystem.html'>solar planet</a>
</body>
</html>

EARTH.HTML
<html>
<head>
<title>about mercury</title>
</head>
<body>
<center> <h1>earth planet</h1> </center>
<p>
earth is the third planet from the sun and the fifth largest:
orbit: 149,600,000 km (1.00 au) from sun
diameter: 12,756.3 km
mass: 5.972e24 kg
earth is the only planet whose english name does not derive from greek/roman mythology. the
name derives from old english and germanic. there are, of course, hundreds of other names for the
planet in other languages. In roman mythology, the goddess of the earth was tellus - the fertile soil
</p>
<a href='solarsystem.html'>solar planet</a>
</body>
</html>

MARS.HTML
<html>
<head>
<title>about mercury</title>
</head>
<body>
<center> <h1>mars planet</h1> </center>
<p>
mars is the fourth planet from the sun and the seventh largest:
orbit: 227,940,000 km (1.52 au) from sun
diameter: 6,794 km
mass: 6.4219e23 kg
the first spacecraft to visit mars was mariner 4 in 1965. several others followed including mars 2,
the first spacecraft to land on mars and the two viking landers in 1976. ending a long 20 year hiatus,
mars pathfinder landed successfully on mars on 1997 july 4. in 2004 the mars expedition rovers
2
 "spirit" and "opportunity" landed on mars sending back geologic data and many pictures;
they are still operating after more than three years on mars
</p>
<a href='solarsystem.html'>solar planet</a>
</body>
</html>

Output:

Result:
Thus the HTML program is created and image is inserted.

3
 Ex.No: 1.1 CASCADING STYLE SHEETS - INLINE STYLESHEET
Date:

AIM:
To create a webpage to implement inline style sheet.

Algorithm:
Step1: Create a html file.
Step2: Inside the head tag define the click reference, its type and set href.
Step3: Close the head tag.
Step4: Inside the body tag define the required heading h1,h2,…hn paragraph.
Step5: Close the body tag and all opened tags.
Step6: Create the inline style sheet.
Step7: Define the style formats such as button and text to corresponding header.
Step8: Execute the program.

Program:

inline.html
<html>
<head>
<title>inline sheet</title>
</head>
<body>
<p style="font-family:Showcard Gothic">Welcome user..</p>
<p style="font-size:40pt;font-family:Microsoft sans serif">Gmail</p>
<p style="font-size:30pt;color:red;font-family:arial">The worlds largest spam free Email
provider</p>
<p style="font-size:30pt;color:blue;font-family:Kristen ITC">Old user login here...</p>
<h4 style="font-family:Lucida Handwriting">User Name:<input type="text" value="
">@gmail.com.<br>
Password:<input type="password"value=""<br><br></h4>
<input type="submit" value="login">
<input type="reset"value="cancel"><br><br>
<p style="font-size:15pt;font-family=Lucida Handwriting">if u have your username or
password
<a href="pass.html">click</a>here<br>
<p style="font-size:15pt;font-family=fixedsys">if you are a new user
<a href="logon.html">logon</a>here</p>
</body>
</html>

logon.html
<html>
<head>
<title>hai</title>
</head>
<body>
<h4 style="font-family:Lucida Handwriting">User Name:<input type="text" value="
">@gmail.com.<br>
<br> password:<input type="password" value=""><br><br>

4
 new password:<input type="new password" value=""><br>
<br>
confirm password:<input type="confirm password"value=""><br><br>
<input type="submit" value="ok">
<input type="submit" value="cancel">
</body> </html>
pass.html
<html>
<head> <title>hai</title>
</head> <body>
<h1>welcome to gmail</h1>
</body>
</html>

Output:

Result:

Thus the inline style sheet HTML program has been executed successfully.

5
Ex.No: 1.2 EMBEDDED STYLE SHEET
Date:
Aim:
To create a webpage with the following using html to embedded the style sheet.

Algorithm:
Step1: Create html file with the style tag, inside head tag.
Step2: Set the style such as font-family, font-size, color, left etc, for the heading h1,h2,…h6
and respectively.
Step3: Close the head tag.
Step4: Specify the heading and information required inside the body tag.
Step5: Close the opened tag.

Program:
<html>
<head>
<title> Embedded style sheet </title>
<style type="text/css">
h1
{
font-family:arial;
color:green; }
h2
{
font-family:arial;
color:red;
left:20px;
}
h3
{
font-family:arial;
color:blue;
}
p
{
font-size:14pt;
font-family:verdana;
}
</style>
</head>
<body>
<h1> <center>EMBEDDED STYLE SHEET </h1>
<h2> Computer science and Engineering</h2>
<h3>
<p>
It is the best department.It has several lab facilities.
</p>
</h3>
</body>
</html>

6
Output:

Result:

Thus the Embedded style sheet HTML program has been executed successfully.
7
Ex.No: 1.3 EXTERNAL STYLE SHEET
Date:

Aim:
To create a webpage with the following using html to implement external style sheet.

Algorithm:
Step1: Create a html file.
Step2: Inside the head tag define the link reference, its type and set href as “ex.css”.
Step3: Close the head tag.
Step4: Inside the body tag define the required heading h1,h2,…h6 and paragraph.
Step5: Close the body tag and all opened tags.
Step6: Create the cascade style sheet file “ex.css”.
Step7: Define the style formats such as font color, font size, etc to the corresponding headings
and paragraph and same its as “ex.css”.

Program:

<html>
<head>
<link rel="stylesheet" type="text/css" href="ex.css"/>
</head>
<body> <center>
<h1> External style sheet</h1></center>
<h2><center>GKMCET</center></h2>
<p>
<h3>Our Institution consists of various departments:<br>
1.CSE<br>
1. ECE<br></h3>
</p>
</body>
</html>
EX.CSS
h1
{
font-family:arial;
color:red;
}
h2
{
font-family:verdana;
color:green;
}

8
Output:

Result:
Thus the External style sheet HTML program has been executed successfully.
9
Ex.No: 2 CLIENT SIDE SCRIPTS FOR VALIDATING WEB FORM CONTROLS
USING DHTML
Date:

AIM:
To create a Client Side Scripts for Validating Web Form Controls using DHTML

ALGORITHM:
Step 1: Create a web page with Textbox and Submit control
Step 2: Write a scripting code using java script to validate the content in the text box.
Step 3: If there is no content then display Error message to fill.
Step 4: Otherwise display the content in the Message box.
Step 5: Run the Program.

Program:

Validate.html

<html>
<head>
<title>A Simple Form with JavaScript Validation</title>
<script type="text/javascript">
<!--
function validate_form ( )
{
valid = true;
if ( document.contact_form.contact_name.value == "" )
{
alert ( "Please fill name in the 'Your Name' box." );
valid = false;
}
else
{
alert("Welcome Mr/Ms "+ document.contact_form.contact_name.value);
}
return valid;
}
-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="contact_form" method="post" onSubmit="return validate_form ( );">
<h1>Please Enter Your Name</h1>
<p>Your Name: <input type="text" name="contact_name"></p>
<p><input type="submit" name="send" value="Send Details"></p>
</form>
</body>
</html>

10
Output:

Result:
Thus the above program created a web page that validate the content of the given text box
using Java Script code.
11
Ex.No: 3
CREATION OF SIMPLE PHP PROGRAM TO PRINT SUM OF DIGITS
Date:

AIM:

To create a simple php program to print sum of digits.

ALGORITHM:

Step 1: Start the program.

Step 2: Assign the values to variables.
Step 3: Adding the two variable.
Step 4: Display the output value.
Step 5: stop the program.

PROGRAM:

<!DOCTYPE html>
<html>
<body>

<?php
$txt1 = "Sum of x and y is:";
$x = 1234;
$y = 4321;

echo "<h3>" . $txt1 . "</h3>";

echo $x + $y;
?>

</body>
</html>

OUTPUT:
Sum of x and y is:
5555

RESULT:

Thus the program was successfully executed and the output is verified.
 Ex.No: 4 HANDLING MULTIMEDIA CONTENT IN WEB SITES
Date:

AIM:

To create a simple program to handle multimedia content in web sites.

ALGORITHM:

Step 1: Start the program.

Step 2: Assign the video file into source.
Step 3: if file not opened, choose the alternate file.
Step 4: if file opened, display the file.
Step 5: stop the program

PROGRAM:

<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
<p>
Video courtesy of
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

</body>
</html>

OUTPUT:

RESULT:

Thus the program was successfully executed and the

13
 Ex.No: 5 SERVLET
Date: A JAVA PROGRAM TO INVOKE SERVLETS FROM HTML FORM

AIM:
To write a java program to invoke servlets from HTML forms.

Algorithm:
Step1 :Write a client side HTML program (client.html) with the following:
o Insert a <form> that contains the fields such as text, password and one
submit button.
o Set the URL of the server as the value of form’s action attribute.
Step2 :Write a java servlet program (server.java) with the following:
o Define a class server that extends the property of the class GenericServlet.
o Handle the request from the client by using the method service() of GenericServlet
class.
o Get the parameter names from the HTML form by using the method
getParameterNames().
o Get the parameter values from the HTML forms by using the method
getParameter().
o Send the response to the client by using the method of PrintWriter class.
Step3: Compile the java source code (server.java).
Step4: Run the HTML program (client.html).
Step5: Submit the form data to the server.

Program:

Addition.html:
<html>
<head>
<title> Addtion of Two Numbers </title>
<body>
<form action = Addition method = "GET">
firstnumber <input type =text size =20 name =firstnumber>
second number <input type =text size =20 name =secondnumber>
<input type = submit value = "submit">
</body>
</head>
</html>
Addition.java:
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Addtion extends HttpServlet
{
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException
{
response.setContentType("text/html");

14
 PrintWriter out = response.getWriter();
String fname = request.getParameter("firstnumber");
String sname = request.getParameter("secondnumber");
int fno = Integer.valueOf(fname );
int sno =Integer.valueOf(sname);
out.println("Addtion totel No:");
out.println( fno+sno);
}
}

Output:

Result:

Thus the program using html servlet is successfully executed and the output is verified.

15
Ex.No: 5.1 SESSION TRACKING USING HIDDEN FORM FIELDS AND SESSION
TRACKING FOR A HIT COUNT
Date:

AIM:
To create session tracking using hidden form fields and session tracking for a hit count using
servlet.

ALGORITHM:
STEP 1: start the program.
STEP2: Write a code for individual for html, java and servlet foe each.
STEP 3: Connecting this code we will count the session count.
STEP 4: Display the code properly and stop the program.

PROGRAM:
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="FirstServlet" method="Post">
<!-- Move the control to firstServlet -->
Name:<input type="text" name="userName" /><br />
<input type="submit" value="submit" />
</form>
</body>
</html>

16
 // Java program to demonstrate
// Hidden form field method
package GeeksforGeeks;
import java.io.*;
import javax.servlet.*;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
@WebServlet("/FirstServlet")
// this annotation is used for replacing xml file
public class FirstServlet extends HttpServlet {

// class name is FirstServlet which extends HttpServlet

public void doPost(HttpServletRequest request, HttpServletResponse response)
{
try {
response.setContentType("text/html");
/*
The response's character encoding is only set from the given
content type if this method is called before getWriter is called.
This method may be called repeatedly to change content type and
character encoding.
*/
PrintWriter out = response.getWriter();
/*
The Java PrintWriter class ( java.io.PrintWriter ) enables you to
write formatted data to an underlying Writer . For instance,
writing int, long and other primitive data formatted as text,
rather than as their byte values
*/
String username = request.getParameter("userName");
/*
request.getParameter takes the value from index.html file where
name is username
*/
out.print("Welcome " + username);
// out.println is used to print on the client web browser
/*
In the below code their is a hidden form
17
 for maintaining session of user.
this passes control to SecondServlet
*/
out.print("<form action='SecondServlet'>");
out.print("<input type='hidden' name='username' value='" + username + "'>");
out.print("<input type='submit' value='submit'>");
out.print("</form>");
out.close();
}
catch (Exception e) {
System.out.println(e);
}
}
}

// Java program to demonstrate

// Hidden form field method
package GeeksforGeeks;
import java.io.*;
import javax.servlet.*;
import javax.servlet.annotation.WebServlet; // Importing annotation
import javax.servlet.http.*;
// using this annotation we dont need
// xml file for dispathing servlet
@WebServlet("/SecondServlet")
public class SecondServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)

18
 {
try

{
response.setContentType("text/html");
/*
The response's character encoding is only set from the given
content type if this method is called before getWriter is called.
This method may be called repeatedly to change content type and
character encoding.
*/

PrintWriter out = response.getWriter();

/*

The Java PrintWriter class ( java.io.PrintWriter ) enables you to

write formatted data to an underlying Writer . For instance,
writing int, long and other primitive data formatted as text,
rather than as their byte values
*/

// getting value from the query string

String username = request.getParameter("username");
// taking the value of username from First servlet using getparameter object
out.print("WELCOME " + username);
// out.println is used to print on the client web browser
out.close();
}
catch (Exception e) {
System.out.println(e);
}
}
}

19
Result:

Thus the program using html servlet is successfully executed and the output is verifie

20
 Ex.No: 6 CREATION OF INFORMATION RETRIEVAL SYSTEM USING
WEB, PHP AND MYSQL
Date:

AIM:

To create a simple program to handle multimedia content in web sites.

ALGORITHM:

Step 1: Start the program.

Step 2: Write a code for web page
Step 3: Ensure the database connectivity
Step 4: Retrive the code from the database..
Step 5: Display the result.

PROGRAM:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "gfg";
// connect the database with the server
$conn = new mysqli($servername,$username,$password,$dbname);
// if error occurs
if ($conn -> connect_errno)
{
echo "Failed to connect to MySQL: " . $conn -> connect_error;
exit();
}
$sql = "select * from student";
$result = ($conn->query($sql));
//declare array to store the data of database
$row = [];
if ($result->num_rows > 0)
{
// fetch all data from db into array
$row = $result->fetch_all(MYSQLI_ASSOC);
}
?>

21
<!DOCTYPE html>
<html>
<style>
td,th {
border: 1px solid black;
padding: 10px;
margin: 5px;
text-align: center;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Branch</th>
<th>Roll Number</th>
</tr>
</thead>
<tbody>
<?php
if(!empty($row))
foreach($row as $rows)
{
?>
<tr>
<td><?php echo $rows['name']; ?>
</td>
<td><?php echo $rows['branch']; ?></td>
<td><?php echo $rows['roll_no']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</body>
</html>
<?php
mysqli_close($conn);
?>
22
 OUTPUT:

Result:

Thus the program is successfully executed and the output is verified.

23
Ex.No: 7 CREATION OF PERSONAL INFORMATION SYSTEM
Date: PROGRAM USING WEBSERVICE AND DATABASE

AIM:
To create a web service for travel service using NetBeans.

SOFTWARE REQUIRED

NetBeans

DESCRIPTION
A web service is any piece of software that makes itself available over the internet and uses a
standardized XML messaging system. XML is used to encode all communications to a web
service. For example, a client invokes a web service by sending an XML message, then waits
for a corresponding XML response.
Web services allows you to expose the functionality of your existing code over the network.
Once it is exposed on the network, other application can use the functionality of your program.
Web services allow various applications to talk to each other and share data and services among
themselves.
ALGORITHM
1. Using the NetBeans API create a project of the type web application.
2. Establish connectivity with the database along with the necessary authentication
parameters.
3. Create a web service in the project.
4. Click on the Design tab and design the prototype of the web service.
5. Click on source tab and modify the application logic of the web service.
6. Save the project.
7. Right click on the project and click on deploy and undeploy.
8. Then test the web service.
9. Create another web application project and create a jsp file.
10. Right click on project and click on create web service client.
11. Browse and choose the web service created i.e wsdl url
12. Drag and drop the web service reference to the source code window.
13. Then pass the appropriate parameters to the web service client and invoke the web
service.

STEPS FOR CREATING TRAVEL WEB SERVICE

Requirements:
->Mysql
->netbeans with glass fishv2 server
I. Before creating project in net beans do the following:
1. Install Mysql setup file and the gui tools .
2. Then open the mysql browser in the start->programs->mysql->mysql browser

24
Then restore the back up (newproject2011…) as follows
1. choose tools->mysql administrator
2. Then choose restore in that window..Then click open backup in the bottom…open thebackup
file(newproject201….) which is in the attachment….then click start restore..

3. Now the schema is created in the mysql…..

4. Start the coding in Netbeans

25
 SERVER SIDE:
1. Create the server project as before and with the following changes.Project
name: KPNBusTravels
2. Web servicename:KPNBusTravelsPackage
name:kpnpack
2.in design window Operation
name:getBusParameters:
Source and destination with the type as String.4.
Add the following code in source
package kpnpack;
import java.sql.Connection; import
java.sql.DriverManager;import
java.sql.ResultSet; import
java.sql.Statement; import
java.util.ArrayList; import
java.util.Hashtable; import
javax.jws.WebMethod; import
javax.jws.WebParam; import
javax.jws.WebService;
/**** @author user*/ @WebService()

public class KPNBusTravelsWS {

/*** Web service operation*/@WebMethod(operationName = "getBus")

public String getBus(@WebParam(name = "source")String

source, @WebParam(name = "destination") String destination) {
//TODO write your implementation code here: ArrayList<String>
service_name = new ArrayList<String>(); ArrayList<String>
departure_time = new ArrayList<String>(); ArrayList<String>
arrival_time = new ArrayList<String>(); ArrayList<String> bus_fare = new
ArrayList<String>(); ArrayList<String> bus_type = new ArrayList<String>();
ArrayList<String> bus_category=new ArrayList<String>();
try { Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/qos","root","root");
Statement st1=con1.createStatement();
st1.executeUpdate("insert into
qostable(webname,exetime,price,compute,availtime)
values('"+wn+"','"+et+"','"+pr+"','"+ct+"','"+at+"')");
Statement st=con.createStatement();
ResultSet rs = st.executeQuery(sql);int i=0;
while (rs.next()) {
departure_time.add(rs.getString(3));
arrival_time.add(rs.getString(4));
bus_fare.add(rs.getString(5));
bus_type.add(rs.getString(9));
bus_category.add(rs.getString(11));
service_name.add(rs.getString(12));
// service_name.add(rs.getString("Servicename"));
}

}
catch ( Exception e) {
26
 e.printStackTrace();
}
String concatBus = service_name.toString()+"&"+departure_time.toString()+"&"+arrival_time.toString()
+"&"+bus_fare.toString() +"&"+
bus_type.toString() +"&"+bus_category.toString() +",";return
concatBus;
}

5. Then deploy the service and test the web service as before.Give input
as Chennai and Coimbatore .then click getbus.

CLIENT SIDE:
1. Create new project
27
 2. Name:client1
3. As before in addition program create web service reference.
4. The source code for index.jsp and action,jsp are as follow.
Index.jsp:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h2>Hello World!</h2>
<form name="" action="actionn.jsp" method="post">Enter
Source:<input name="source" type="text" /><br/>
Enter Destination:<input name="destination" type="text" /><br/>
<input name="ok" type="submit" value="" />
</form>
</body>
</html>
Action.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h2>Hello World!</h2>
<%

String a1=request.getParameter("source"); String

b1=request.getParameter("destination");
%>

<%-- start web service invocation --%><hr/>

<%-- end web service invocation --%><hr/>
<%-- start web service invocation --%><hr/>
<%

String[] res,commasplit=null,lbrsplit=null,rbrsplit=null;String[][]
flight_trans=new String[100][100];
int row=0,col=0; int
trow=0,tcol=0;
int midrow=0,midcol=0;
// Jagson
String[] jagres,jagcommasplit=null,jaglbrsplit=null,jagrbrsplit=null;String[][]
jagflight_trans=new String[100][100];
28
 int jagrow=0,jagcol=0;
//Air India
String[] airres,aircommasplit=null;
String[][] airflight_trans=new String[100][100];
int airrow=0,aircol=0;try {
kpnpack.KPNBusTravelsWSService service =
new kpnpack.KPNBusTravelsWSService();
kpnpack.KPNBusTravelsWS port = service.getKPNBusTravelsWSPort();
// TODO initialize WS operation arguments here
java.lang.String source = "a1";
java.lang.String destination = "b1";
// TODO process result here
java.lang.String result = port.getBus(source, destination);
out.println("Result = "+result);
res=result.split("&"); System.out.println("Jet
Split:"+res);
for(int i=0;i<res.length;i++)
{

int j=0; row=res.length;

String lbr=res[i].replace("[", "");
String rbr=lbr.replace("]", "");
commasplit=rbr.split(",");
for( j=0;j<commasplit.length;j++)
{

col=commasplit.length;
System.out.println("flight_trans[i][j]"+i+"/"+j);
if(commasplit[j]!=null) flight_trans[j][i]=commasplit[j];
}

// if( flight_trans[i][j]==null)
// col=0;
}

// out.println("Res = "+res[0]);
System.out.println("TR");
System.out.println("jetRow:"+row);
System.out.println("jetColumn:"+col); for(int
r=0;r<row;r++)
{

for(int c=0;c<col;c++)
{
if(flight_trans[r][c]!=null)
System.out.print("tr:"+flight_trans[r][c]);
}
System.out.println();
}
} catch (Exception ex) {
// TODO handle custom exceptions here

29
}
%>
<%-- end web service invocation --%><hr/>
</body>
</html>
Then finally undeploy and deploy the client and run it………….

RESULT:

Thus the web service for travel services has been created.

30
 Exp.No:1
Create a webpage for the Company Homepage
Date:

AIM:
To create a webpage for company homepage using HTML AND CSS.

Algorithm:

1.Create Files: Make two files - "index.html" and "style.css

2.Link CSS: In the HTML file, inside <head>, add <link rel="stylesheet" href="style.css">.
3.Structure Content: In HTML <body>, define header, navigation, sections, and footer.
4.Add Content: Fill in header with logo and navigation links, sections with main content, and
footer with copyright notice.
5.Style: In "style.css", style the elements - header, navigation, sections, footer, etc. Adjust color
fonts, sizes as needed.

PROGRAM
HTML

<!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>IT Company Website</title>
<link rel="stylesheet" href="homepage.css">
</head>

<body>
<header class="header">
<a href="#" class="logo"><img src="./images/image.png" alt=""></a>
<div class="fas fa-bars"></div>
<nav class="navbar">
<ul>
<li><a href="#home">home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#service">services</a></li>
<li><a href="#portfolio">portfolio</a></li>
<li><a href="#team">team</a></li>
<li><a href="careers.html">career</a></li>
<li><a href="#contact">contact</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
</header>

<section id="home" class="home">

31
 <h1>Bring your Business Online</h1>
<h2>with IT Company Services</h2>
<div class="wave wave1"></div>
<div class="wave wave2"></div>
<div class="wave wave3"></div>
</section>
<footer>
<p>&copy; 2024 Company Name. All rights reserved.</p>
</footer>

</body>

</html>

#homepage.CSS:
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
text-transform: capitalize;
transition: all 0.2s linear;
text-decoration: none;
}

html {
font-size: 62.5%;
}

body {
overflow-x: hidden;
}

.header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1rem 2rem;
position: fixed;
top: 0;
left: 0;
z-index: 100;
position: fixed;
}

.header .logo img {

width: 130%;
height: 3rem;
top: 0;
left: 0;
}

.header .navbar ul {
list-style-type: none;
display: flex;
align-items: center;
justify-content: space-around;
}
32
.header .navbar ul li {
margin: 0 1.5rem;
}

.header .navbar ul li a {
font-size: 2rem;
color: #fff;
}

.header .navbar ul li a:hover {

color: #00bfff;
text-decoration: underline;
}

.header .logo i {
padding: 0.5rem;
}

.header .fa-bars {
color: #fff;
cursor: pointer;
font-size: 3rem;
display: none;
}

.home {
min-height: 100vh;
width: 100vw;
background-image: url(../images/img1.jpg);
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
text-align: center;
padding: 0 1rem;
position: relative;
overflow: hidden !important;
}

.home h1 {
color: #fff;
font-size: 5.5rem;
}

.home h2 {
color: #fff;
font-size: 3rem;
}

.home .wave {
position: absolute;
bottom: -0.5rem;
left: 0;
height: 11rem;
width: 100%;
background: url(../images/wave.png);
33
 background-size: 100rem 11rem;
animation: waves 8s linear infinite;
background-repeat: repeat-x;
}

.home .wave2 {
animation-direction: reverse;
animation-duration: 6s;
opacity: 0.3;
}

.home .wave3 {
animation-duration: 4s;
opacity: 0.5;
}

@keyframes waves {
0% {
background-position-x: 0;
}
100% {
background-position-x: 100rem;
}
}

footer {
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}

34
Output:

RESULT:

Thus the webpage for the Company was executed successfully and verified.

35