Ip Lab Experiments Print
Ip Lab Experiments Print
No :01
Date :
HOTSPOTS IN MAP
Aim:
Procedure:
1. Download a map image from internet and save the image with map.jpg
2. Create a webpage using html by embedding map image using <img> tag
3. Identify positions on the map using paint application for creating hotspots
4. Create hotspots on the map images using <map> tag
5. Create web pages for each hotspots
6. Run the application
Program:
map.html
<!DOCTYPE html>
<html>
<head>
<title>INDIA MAP</title>
</head>
<body>
<imgsrc="india.jpg" alt="India-map" usemap="#indiamap">
<map name="indiamap">
<area coords="336,987,50" shape="circle" href="tn.html">
<area coords="261,975,50" shape="circle" href="kr.html">
<area coords="362,792,50" shape="circle" href="an.html">
<area coords="247,644,50" shape="circle" href="ma.html">
</map>
</body>
</html>
kl.html
<!DOCTYPE html>
<html>
<head>
<title>KERALA MAP</title>
</head>
<body>
<imgsrc="kl.jpg" >
</body>
</html>
tn.html
<!DOCTYPE html>
<html>
<head>
<title>TAMIL NADU MAP</title>
</head>
<body>
<imgsrc="tnmap.jpg" >
</body>
</html>
Output:
Result:
Thus a web pages for embedding map were created and tested successfully.
Ex.No :02
Date :
IMPLEMENTATION OF CSS TYPES
Aim:
Procedure:
Program:
<!DOCTYPE html>
<html>
<head>
<title>CSS Types</title>
<style type="text/css">
<!--2.Internal Stylesheet -->
h3
{
font-family:arial;
color:blue;
}
h5
{
text-align:center;
}
p
{
font-sise:14pt;
font-family:verdana
}
</style>
<!--3.External Stylesheet -->
<link rel="stylesheet" href="ext.css">
</head>
<body>
<h1>
ABC Institute of Technology
</h1>
<h5>
Approved by AICTE, Affiliated to Anna University
</h5>
<hr>
<h2>About Institution:</h2>
<p>
ABC Institue of Technology was established in the 1995 with five undergraduate
engineering courses.
</p>
<!--1. INLINE STYLE SHEET -->
<h2 style="color:blue;">Course Offered: </h2>
<p>
<ul>
<li>B.E.-CSE</li>
<li>B.E.-ECE</li>
<li>B.E.-EEE</li>
<li>B.E.-MECH</li>
<li>B.E.-CIVIL</li>
</ul>
</p>
<h2>Contact:</h2>
<p>[email protected]</p>
</body>
</html>
ext.css
body{
background-color: #f0e68c;
}
h1{
font-family:arial;
color:green;
text-align:center;
}
h2{
font-family:arial;
color:red;
left:20px
}
Output:
Result:
Thus the web pages for implementing various types of CSS were created and tested successfully.
Ex.No :03
Date :
FORM VALIDATION USING JAVASCRIPT
Aim:
To write a program to Validate the Registration, user login, user profile and payment by credit card pages using JavaScript
Procedure:
Program:
REGISTRATION FORM VALIDATEION
<html>
<head>
<script>
function validate()
{
var name = document.forms["RegForm"]["Name"];
var email = document.forms["RegForm"]["EMail"];
var phone = document.forms["RegForm"]["Telephone"];
var what = document.forms["RegForm"]["Subject"];
var password = document.forms["RegForm"]["Password"];
var address = document.forms["RegForm"]["Address"];
if (name.value == "")
{
window.alert("Please enter your name.");
name.focus();
return false;
}
if (address.value == "")
{
window.alert("Please enter your address.");
address.focus();
return false;
}
if (email.value == "")
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (phone.value == "")
{
window.alert("Please enter your telephone number.");
phone.focus();
return false;
}
if (password.value == "")
{
window.alert("Please enter your password");
password.focus();
return false;
}
if (what.selectedIndex< 1)
{
alert("Please enter your course.");
what.focus();
return false;
}
return true;
}
</script>
<style>
div
{
box-sizing: border-box;
width: 100%;
border: 100px solid black;
float: left;
align-content: center;
align-items: center;
}
h1
{
text-align: center
}
form
{
margin: 0 auto;
width: 600px;
}
</style>
</head>
<body>
<h1> REGISTRATION FORM </h1>
<form name="RegForm" action="" onsubmit="return validate()" method="post">
<!DOCTYPE html>
<html>
<head>
<script>
functionvalidateForm()
{
var un = document.loginform.usr.value;
varpw = document.loginform.pword.value;
var username = "username";
var password = "password";
if ((un == username) && (pw == password))
{
return true;
}
else
{
alert ("Login was unsuccessful, please check your username and password");
return false;
}
}
</script>
</head>
<body>
<h1>LOGIN FORM VALIDATION</h1>
Output:
Result:
Thus programs to Validate the Registration, user login, user profile and payment by credit card pages using JavaScript were created
and tested successfully.
Ex.No :04.a
Date :
INVOKE SERVLET FROM HTML FORM
Aim:
To Write programs in Java using Servlets to Invoke Servlets from HTML Forms Using Servlets
Procedure:
Program:
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Invoke Servlet</title>
<style>
div{
text-align: center;
}
</style>
</head>
<body>
<div>
<h1><center>INVOKING SERVLETS FROM HTML</center></h1>
<hr>
<form action="MyServlet1" method="get">
User Name:<input type="text" name="uname"><br><br>
Password:<input type="password" name="pass"><br><br>
<input type="submit" value="Invoke Servlet">
</form>
</div>
</body>
</html>
MyServlet1.java
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
}
}
Output:
Result:
Thus the programs in Java using Servlets to Invoke Servlets from HTML Forms Using Servlets were created and tested successfully.
Ex.No :04.b
Date :
SESSION TRACKING USING HIDDEN FORM FIELDS
Aim:
To Write programs in Java using Servlets for session tracking using hidden form fileds.
Procedure:
Program:
index.html
<html>
<body>
<form action="FirstServlet" method="get">
Name:<input type="text" name="userName"/><br/>
<input type="submit" value="go"/>
</form>
</body>
</html>
FirstServlet.java
import java.io.*;
importjavax.servlet.*;
importjavax.servlet.http.*;
}
SecondServlet.java
import java.io.*;
importjavax.servlet.*;
importjavax.servlet.http.*;
public class SecondServlet extends HttpServlet
{
public void doGet(HttpServletRequest request, HttpServletResponse response)
{
try
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
Output:
Result:
Thus the programs in Java using Servlets for session tracking using hidden form fileds were created and tested successfully.
Ex.No : 05
Date :
Aim:
Write programs in Java to create three-tier applications using servlets for conducting online examination for displaying
student mark list. Assume that student information is available in a database which has been stored in a database server.
Procedure:
Program:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Online Examination</title>
<meta charset="UTF-8">
</head>
<body>
<div>Online Examination</div>
<form name="myform" action="NewServlet1" method="post">
1.Which of the following approach is adapted by C++?<br>
<input type="radio" name="q1" value="topdown">Top-down<br>
<input type="radio" name="q1" value="bottomup">Bottom-up<br>
<input type="radio" name="q1" value="rightleft">Right-Left<br>
<input type="radio" name="q1" value="leftright">Left-Right<br>
<br>
2.Which of the following is not a type of constructor?<br>
<input type="radio" name="q2" value="copy">Copy Constructor<br>
<input type="radio" name="q2" value="default">Default Constructor<br>
<input type="radio" name="q2" value="friend">Friend Constructor<br>
<input type="radio" name="q2" value="parameter">Parameterized Constructor<br>
3.What is the title of the book about Waterloo written by “Simon the Troll”?<br>
<input type="radio" name="q3" value="dream">Dreaming in Technicolor<br>
<input type="radio" name="q3" value="default">Water Under the Bridge<br>
<input type="radio" name="q3" value="friend">Images of Waterloo<br>
<input type="radio" name="q3" value="parameter">Parameterized Constructor<br>
4.Waterloo Counselling Services provides workshops about?<br>
<input type="radio" name="q4" value="study">study skills<br>
<input type="radio" name="q4" value="default">Water Under the Bridge<br>
<input type="radio" name="q4" value="friend">Images of Waterloo<br>
<input type="radio" name="q4" value="parameter">Parameterized Constructor<br>
5.During what period was James Downey the president of Waterloo?<br>
<input type="radio" name="q5" value="copy">1990-1996<br>
<input type="radio" name="q5" value="default">1991-1997<br>
<input type="radio" name="q5" value="year"> 1993-1999<br>
<input type="radio" name="q5" value="parameter">1992-1998<br>
<input type="text" name="rollno" placeholder="Enter your Roll Number">
<input type="text" name="name" placeholder="Enter your name">
<input type="submit" value="Submit">
</form>
</body>
</html>
Servlet1.java
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjava.sql.*;
if(q1.equals("bottomup"))
{
score=score+1;
}
if(q2.equals("friend"))
{
score=score+1;
}
if(q3.equals("dream"))
{
score=score+1;
}
if(q4.equals("study"))
{
score=score+1;
}
if(q5.equals("year"))
{
score=score+1;
}
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet NewServlet1</title>");
out.println("</head>");
out.println("<body>");
Class.forName("com.mysql.jdbc.Driver");
Connection con= DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");
PreparedStatementps=con.prepareStatement("insert into student4 values(?,?,?)");
ps.setString(1,rollno);
ps.setString(2,name);
ps.setInt(3,score);
int i=ps.executeUpdate();
if(i>0)
{
out.println("You have completed Exam Successfully!!!");
out.println("<form action='NewServlet2' method='post'>");
out.println("<input type='hidden' name='rollno' value='"+rollno+"'>");
out.println("<input type='submit' value='View Score'>");
out.println("</form>");
}
else
out.println("Failed to insert");
out.println("</body>");
out.println("</html>");
}
catch(Exception e){}
}
}
Servlet2.java
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjava.sql.*;
public class NewServlet2 extends HttpServlet
{
}
Output:
Result:
Thus the programs for conducting online examinations were created and tested successfully.
Ex.No. :06
Date :
SHOPPING CART USING SERVLET
Aim:
Install TOMCAT web server. Convert the static web pages of programs into dynamic web pages using servlets (or JSP) and cookies.
Hint: Users information (user id, password, credit card number) would be stored in web.xml. Each user should have a separate
Shopping Cart.
Procedure:
Program:
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Online Shopping</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div,h1
{
text-align: center;
}
</style>
</head>
<body>
<h1>ONLINE SHOPPING CART</h1>
<div>
<form method="get" action="Verify">
<input type="text" name="uname" placeholder="Enter User Name"><br><br>
<input type="text" name="pwd" placeholder="Enter Password"><br><br>
<input type="submit" value="Login" name="add">
</form>
</div>
</body>
</html>
Verify.java
import java.io.*;
import java.io.*;
importjavax.servlet.http.*;
importjavax.servlet.*;
public class Verify extends HttpServlet
{
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<title>Online Shopping</title>");
out.println("</head>");
out.println("<body>");
if(uname.equals(uname1)&&pwd.equals(pwd1))
{
Cookie c1 = new Cookie("uname", uname);
response.addCookie(c1);
response.sendRedirect("BuyProduct");
}
else
{
response.sendRedirect("index.html");
}
out.println("</body>");
out.println("</html>");
}
catch(Exception e){}
}
}
BuyProduct.java
import java.io.*;
import java.io.*;
importjavax.servlet.http.*;
importjavax.servlet.*;
ShoppingCart.java
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.*;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
response.sendRedirect("BuyProduct");
}
else if(str4 != null)
{
out.println("<br>Your Products:<br>");
for(int i = 1; i <clientCookies.length; i++)
{
out.print("<b>" + clientCookies[i].getName() + " : " + clientCookies[i].getValue() + "</b><br>");
}
out.println("Payment successfull with card number "+card);
}
out.println("</body>");
out.println("</html>");
out.close( ) ;
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throwsServletException, IOException {
processRequest(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throwsServletException, IOException {
processRequest(request, response);
}
@Override
public String getServletInfo() {
return "Short description";
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<servlet>
<servlet-name>ShoppingCart</servlet-name>
<servlet-class>ShoppingCart</servlet-class>
</servlet>
<servlet>
<servlet-name>Verify</servlet-name>
<servlet-class>Verify</servlet-class>
</servlet>
<servlet>
<servlet-name>BuyProduct</servlet-name>
<servlet-class>BuyProduct</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ShoppingCart</servlet-name>
<url-pattern>/ShoppingCart</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Verify</servlet-name>
<url-pattern>/Verify</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>BuyProduct</servlet-name>
<url-pattern>/BuyProduct</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<context-param>
<param-name>uname</param-name>
<param-value>abc</param-value>
</context-param>
<context-param>
<param-name>pwd</param-name>
<param-value>123</param-value>
</context-param>
<context-param>
<param-name>card</param-name>
<param-value>123456789</param-value>
</context-param>
</web-app>
Output:
Result:
Thus the programs for online shopping cart using servlet and cookies were created and tested successfully.
Ex.No :07
Date :
ONLINE BOOK STORE USING DATABASE
Aim:
Redo the previous task using JSP by converting the static web pages into dynamic web pages. Create a database with user
information and books information. The books catalogue should be dynamically loaded from the database.
Procedure:
Program:
login.html
<!DOCTYPE html>
<html>
<head>
<title>Signin Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div,h1{
text-align: center;
}
</style>
</head>
<body>
<div>
<h1>Signin Form</h1>
<form action="verify.jsp" method="post">
Name:<input type="text" name="email"><br><br>
Password:<input type="password" name="pass"><br><br>
<input type="submit" value="Login">
</form>
</div>
</body>
</html>
verify.jsp
viewbooks.jsp
Result:
Thus the programs for online bookstore using jsp were created and tested successfully.
Ex.No. :08
Date :
READING INFORMATION FROM XML
Aim:
Create and save an XML document at the server, which contains 10 users Information. Write a Program, which takes user Id
as an input and returns the User details by taking the user information from the XML document
Procedure:
1. Create student.xml file with information about three students in the web server.
2. Create a html file with javascriptXMLHttpRequest object for accessing data from the XML file located in the web server.
3. Get student roll number from user
4. Display details of particular roll number from the XML file.
Program:
read.xml
<studentdetails>
<student>
<rollno>cs1501</rollno>
<name>Arun</name>
<department>CSE</department>
</student>
<student>
<rollno>cs1502</rollno>
<name>Ashok</name>
<department>CSE</department>
</student>
<student>
<rollno>cs1503</rollno>
<name>Kannan</name>
<department>CSE</department>
</student>
<student>
<rollno>cs1504</rollno>
<name>Dinesh</name>
<department>CSE</department>
</student>
</studentdetails>
readxml.html
<!DOCTYPE html>
<html>
<body>
<form name="myform" onsubmit="readXMLData()" method="get">
Enter Roll Number:<input type="text" name="rollno">
<input type="Submit" value="Submit">
</form>
<p id="demo"></p>
<script>
functionreadXMLData()
{
varxhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (this.readyState == 4 &&this.status == 200)
{
myFunction(this);
}
};
xhttp.open("GET", "student.xml", true);
xhttp.send();
}
functionmyFunction(xml)
{
var x, i, xmlDoc;
xmlDoc = xml.responseXML;
roll=document.forms['myform'].elements['rollno'].value;
x = xmlDoc.getElementsByTagName("student");
for (i = 0; i <x.length; i++)
{
roll1=x[i].getElementsByTagName("rollno")[0].childNodes[0].nodeValue;
if(!(roll.localeCompare(roll1)))
{
document.write("<br>");
document.write("<br>Roll No.:"+x[i].getElementsByTagName("rollno")[0].childNodes[0].nodeValue);
document.write("<br>Name:"+x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
document.write("<br>Department:"+x[i].getElementsByTagName("department")[0].childNodes[0].nodeValue);
}
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Output:
Result:
Thus the programs to read the information from xml document were created and tested successfully.
Ex.No. :09.a
Date :
PHP REGULAR EXPRESSION
Aim:
To write a PHP program to validate the form using regular expression
Procedure:
1. Create a form using html for getting email from user at server
2. Create regular expression in php file for validating email at server
3. Run the html file and pass email id
4. Check your email id valid or invalid
Program:
email.html
<!DOCTYPE html>
<html>
<head>
<title>Email Validation</title>
<style>
h1,div{text-align:center;}
</style>
</head>
<body>
<h1>Email Validation using Regular Expression</h1>
<div>
<form action="emailvalidate.php" method="get">
Email:<input type="text" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
emailvalidate.php
<?php
$email=$_GET['email'];
functionvalid_email($str)
{
$patt="/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix";
return (!preg_match($patt, $str)) ? FALSE : TRUE;
}
if(valid_email($email))
{
echo "valid email address.";
}
else
{
echo "Invalid email address.";
}
?>
Output:
Result:
Thus a program to validate form data using regular expression was created and tested successfully.
Ex.No. :09.b
Date :
PHP DATABASE ACCESS
Aim:
To write a PHP program to stores a form data into database
Procedure:
1. Create table student with rollno, name and age attributsin mysql database in the following url:
http://localhost/phpmyadmin
2. Create a form using html for collecting student details from the user
3. Create a php file for storing student details
4. Pass the student details from html form to php file
5. Check the database after storing details
Program:
insert.html
<!DOCTYPE html>
<html>
<head>
<title>PHP Insert Form Data</title>
<style>
h1,div
{
text-align:center;
}
</style>
</head>
<body>
<h1>Insert Student Details</h1>
<div>
<form name="myform" action="insert.php" method="get">
Name:<input type="text" name="uname"><br><br>
Roll Number:<input type="text" name="uroll"><br><br>
Age:<input type="text" name="uage"><br><br>
<input type="submit" value="Insert">
</form>
</div>
</body>
</html>
insert.php
<?php
$rollno=$_GET['uroll'];
$name=$_GET['uname'];
$age=$_GET['uage'];
// Create connection
$conn = new mysqli("localhost", "", "", "test");
// Check connection
if ($conn->connect_error)
{
die("Connection failed:" . $conn->connect_error);
}
if(mysqli_query($conn, $sql))
{
echo "Records inserted successfully.";
}
else
{
echo "ERROR: Could not execute $sql. " . mysqli_error($conn);
}
$conn->close();
?>
Output:
Result:
Thus a program to validate form data using regular expression was created and tested successfully.
Ex.No. :10
Date :
WEB SERVICE
Aim:
To create a web service for adding two integer values in netBeans IDE.
Procedure:
Program:
CalculatorWS.java
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
packageorg.me.calculator;
importjavax.jws.WebService;
importjavax.jws.WebMethod;
importjavax.jws.WebParam;
importjavax.ejb.Stateless;
@WebService(serviceName = "CalculatorWS")
@Stateless()
public class CalculatorWS {
/**
* Web service operation
*/
@WebMethod(operationName = "add")
publicint add(@WebParam(name = "a") int a, @WebParam(name = "b") int b) {
//TODO write your implementation code here:
int c=a+b;
return c;
}
}
CalculatorWSClient.java
packagecalculatorwsclient;
Output:
Result:
Thus a web service for adding two integer values was created in netbeans IDE and java application for consuming the web service was
demonstrated successfully.