WP Record - 1.5 - FNL

Exp. No.
: 1 HTML Semantic Elements Date :
Aim:To design a webpage using the HTML Semantic Elements.

Procedure:
HTML5 offers new semantic elements to define different parts of a web page:
● <article>
● <aside>
● <details>
● <figcaption>
● <figure>
● <footer>
● <header>
● <main>
● <mark>
● <nav>
● <section>
● <summary>
● <time>
SECTION TAG:
The section element defines a section in a document.
According to W3C's HTML5 documentation: "A section is a thematic grouping of content,
typically with a heading."
A home page could normally be split into sections for introduction, content, and contact
information.
ARTICLE TAG:
The <article>element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to read it independently
from the rest of the web site.
Examples of where an <article> element can be used:
● Forum post
● Blog post
● Newspaper article
HEADER TAG:
The <header> element specifies a header for a document or section.
The <header> element should be used as a container for introductory content.
You can have several <header> elements in one document.
FOOTER TAG:
The <footer> element specifies a footer for a document or section.
A <footer> element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to terms
of use, contact information, etc.
NAV TAG:
The <nav> element defines a set of navigation links.
ASIDE TAG:
The <aside> element defines some content aside from the content it is placed in (like a
sidebar).
The <aside> content should be related to the surrounding content.
FIGURE TAG:
The purpose of a figure caption is to add a visual explanation to an image.
In HTML5, an image and a caption can be grouped together in a <figure> element:
PROGRAM:
<!DOCTYPE html>
<html>
<body>
<section>
<h1>WEBPROGRAMMING</h1>
<h1>SECTION TAG</h1>
<p>The <section> element represents a generic section of a document or application.
A section, in this context, is a thematic grouping of content. Each section should be
identified, typically by including a heading (h1-h6 element) as a child of the
<section> element.</p>
</section>
<article>
<h1>ARTICLE TAG</h1>
<p>The <article> tag is one of the new semantic elements introduced with HTML5.
According to the HTML5 specification : The article element represents a section of
content that forms an independent part of a document or site; for example, a magazine
or newspaper article, or a blog entry.</p>
</article>
<footer>
<p>The <footer> element specifies a footer for a document or section.
A footer element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to
terms of use, contact information, etc.
You may have several footer elements in one document.</p>
</footer>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<figure>
<imgsrc="img123.jpg">
<figcaption>Fig1. - img,img1.</figcaption>
</figure>
<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company.</p>
</details>
</body>
</html>
OUTPUT:
RESULT:Thus, a webpage is designed using the semantic elements.

Exp. No.: 2 HTML5 Media Elements Date :
Aim: Write a code for HTML5 Media Elements.

Procedure:
1. Start html tag.
2. Start head tag and declare title.
3. Start body tag.
4. Add video element with all necessary controls.
5. Add audio element with all necessary controls
6. End all the tags.
7. Save the file with html extension.
Program:
<html>
<head>
<title>Media Elements</title>
</head>
<body style="background-color:powderblue;">
<h3 style="text-align:center;">Video</h3>
<video style="display:block; margin: 0 auto;" width="720" height="360"
controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video></br>
<h3 style="text-align:center;">Audio</h3>
<audio style="display:block; margin: 0 auto;" controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</body>
</html>
Output:
Result:The code for HTML5 media elements run successfully.

Exp. No.: 3 Cascading Style Sheet Date :
AIM:To write a HTML script and implement cascaded, embedded and inline style sheets.
PROCEDURE:
1. Create an embedded style sheet to apply style for unordered list in order to make it
display as horizontal menu
2. Setting the display property as inline , so that it displays the menu horizontally
3. Creating another html file which displays customer details
4. Created an external style sheet, used class selector to apply different formatting
for each row (<tr>) of the table .
5. The link tag is used in the html file to link the external style sheet.
6. The attributes of the link tag are set as follows :
type – text/css, href – name of the css file.
7. Customer menu item in Menu.html is linked to display the customer details using
href tag.
PROGRAM:
//Menu.html
<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="customerdetail.html">Customers</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
</body>
</html>
Style.css
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
Customerlist.html
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>CUSTOMER DETAILS</h1>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>AlfredsFutterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglundssnabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercialMoctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>MagazziniAlimentariRiuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>
Output:
Result:The given program was written and executed successfully and output was verified.
Exp. No.: 4 Validation Using JavaScript Date :
Aim: Design a dynamic web page with validation using JavaScript.

Procedure:
● A contact form is designed.
● Whenever the submit button is clicked, validateForm() function is called.
● validateForm() checks for validity of the entered data.
● It checks whether all the required fields have been filled or not.
● For phone number, it checks whether it is a 10 digit number or not using regular
expression.
Program:
<html>
<head>
<title>JavaScript Form validation</title>
<script type="text/javascript">
functionvalidateForm(){
var x=document.forms["myform"]["name"].value;
if(x==""){
alert("Name must be filled");
return false;
}
if ( ( document.myform.gender[0].checked == false ) && (
document.myform.gender[1].checked == false ) ){
alert ( "Please choose your Gender" );
return false;
}
x=document.forms["myform"]["city"].value;
if (x=="Select") {
alert("Select City");
return false
};
x=document.forms["myform"]["email"].value;
if(x==""){
alert("Email must be filled");
return false;
}
x=document.forms["myform"]["address"].value;
if(x==""){
alert("Address must be filled");
return false;
}
if(x.length>25){
alert("Address can not exceed 50 characters");
return false;
}
x=document.forms["myform"]["phone"].value;
if(x==""){
alert("Contact Number must be filled");
return false;
}
varphoneno = /^\d{10}$/;
if(x.match(phoneno))
return true;
else{
alert("Contact Number must be numeric of length 10");
return false;
}
}
</script>
</head>
<body>
<form name="myform" onsubmit="return validateForm()">
<table>
<tr>
<td><label>Name*</label></td>
<td><input type="text" name="name"
placeholder="Enter your Name *">
</td>
</tr>
<tr>
<td><label>DOB</label></td>
<td><input type="date" name="dob"
placeholder="Enter your DOB">
</td>
</tr>
<tr>
<td><label>Gender*</label></td>
<td><input type="radio" name="gender"
value="Male">Male&nbsp&nbsp
<input type="radio" name="gender"
value="Female"> Female</td>
</tr>
<tr>
<td><label>City*</label></td>
<td><select name="city">
<option value="Select">Select</option>
<option value="1">Mumbai</option>
<option value="2">Delhi</option>
<option value="3">Chennai</option>
</select></td>
</tr>
<tr>
<td><label>Email*</label></td>
<td><input type="email" name="email"
placeholder="Enter your email *">
</td>
</tr>
<tr>
<td><label>Contact Number*</label></td>
<td><input type="text" name="phone"
placeholder="Enter your Contact Number*">
</td>
</tr>
<tr>
<td><label>Address*</label></td>
<td><textarea
name="address"placeholder="Enter your
address" rows="10"></textarea>
</td>
</tr>
<tr>
<td><input type="submit" value="Submit">
</td>
<td><strong>*</strong> Required Fields</td>
</tr>
</table>
</form>
</body>
</html>
Output:
Result: Thus, a dynamic form with validation using JavaScript has been designed.
Exp. No.: 5 Servlet Date :
Aim:Write a program to invoke a servlet from HTML form.

Procedure:
1. Create a Directory Structure under Tomcat
When you install Tomcat, several subdirectories are automatically created under the
Tomcat home directory (%TOMCAT_HOME%). One of the subdirectories is
webapps. The webapps directory is where you store your web applications.
2. Write the servlet source code. You need to import the javax.servlet package and the
javax.servlet.http package in your source file.
3. Compile Your Source Code

Copy the created class File under %TOMCAT_HOME% \Webapps\examples\WEB-
INF\classes folder
4. Create the Deployment Descriptor
A deployment descriptor is an optional component in a servlet application, taking the
form of an XML document called web.xml. The descriptor must be located in the WEB-
INF directory of the servlet application. When present, the deployment descriptor
contains configuration settings specific to that application.
The web.xml for this example application must have the following content.
<?xml version="1.0" encoding="ISO-8859-1"?>
<servlet>
<servlet-name>StudentServlet</servlet-name>
<servlet-class>StudentServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>StudentServlet</servlet-name>
<url-pattern>/servlets/servlet/ StudentServlet</url-pattern>
</servlet-mapping>
…
</web-app>
5. Run the Tomcat Sever
6. Call Your Servlet from a Web Browser
7.
You are ready to call your servlet from a web browser. By default, Tomcat runs on
port 8080 in myApp virtual directory under the servlet subdirectory. The servlet that you
just wrote is named StudentServlet. The URL for that servlet has the following format:
http://domain-name/virtual-directory/servlet/ StudentServlet
If you run the web browser from the same computer as Tomcat, you can replace domain-
name with localhost.
Program:
Student.html:
<html>
<head>
<title>Student Result summary</title>
</head>
<body><h2><center>Student Application Form</center></h2>
<form name="frmstud" action="http://localhost:8085/servlets-
examples/servlet/StudentServlet" method="post">
<table border="0" cellspacing="5" cellpadding="5" width="70%">
<tr>
<td>Register number</td>
<td><input type="text" name="txtregno" size="11"/></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" name="txtname" size="11"/></td>
</tr>
<tr>
<td>NPM</td>
<td><input type="text" name="txtnpm" size="3"/></td>
</tr>
<tr>
<td>OOAD</td>
<td><input type="text" name="txtooad" size="3"/></td>
</tr>
<tr>
<td>WT</td>
<td><input type="text" name="txtwt" size="3"/></td>
</tr>
<tr>
<td>CNS</td>
<td><input type="text" name="txtcns" size="3"/></td>
</tr>
<tr>
<td>NM</td>
<td><input type="text" name="txtnm" size="3"/></td>
</tr>
<tr>
<td>ES</td>
<td><input type="text" name="txtes" size="3"/></td>
</tr>
<tr>
<td><input type="submit" name="sbtname" value="Submit"/></td>
<td><input type="reset" name="rstname" value="Reset"/></td>
</tr>
</table>
</form></html>
StudentServlet.java:
import java.io.*;
import java.util.*;
importjavax.servlet.*;
public class StudentServlet extends GenericServlet

{
public void service(ServletRequestreq,ServletResponse res)
throwsServletException,IOException
{
int s1,s2,s3,s4,s5,s6,tot;
float avg;
res.setContentType("text/html");
PrintWriter out=res.getWriter();
out.println("<html>");
out.println("<head>");
out.println("<title>Student Mark Details</title");
out.println("</head>");
out.println("<body>");
out.println("<h2>Student result summarry</h2>");
out.println("Student regno="+req.getParameter("txtregno"));
out.println("<br/>");
out.println("Student name="+req.getParameter("txtname"));
out.println("semester marks");
s1=Integer.parseInt(req.getParameter("txtnpm"));
s2=Integer.parseInt(req.getParameter("txtwt"));
s3=Integer.parseInt(req.getParameter("txtooad"));
s4=Integer.parseInt(req.getParameter("txtnm"));
s5=Integer.parseInt(req.getParameter("txtcns"));
s6=Integer.parseInt(req.getParameter("txtes"));
out.println("Network Programming="+req.getParameter("txtnpm"));
out.println("Web Technology="+req.getParameter("txtwt"));
out.println("Object Oriented
Programming="+req.getParameter("txtooad"));
out.println("Numerical methods="+req.getParameter("txtnm"));
out.println("Cryptography ="+req.getParameter("txtcns"));
out.println("Embedded system="+req.getParameter("txtes"));
tot=s1+s2+s3+s4+s5+s6;
avg=tot/6;
out.println("total marks="+tot);
out.println("Average %="+avg);
out.println("</body>");
out.println("</html>");
out.close();
}
}
Output:
Result:The program to invoke a servlet from HTML form is successfully executed.

Exp. No.: 6 JSP-Online Examination Date :
Aim: To write a jsp program for a html form and link it with a database.
Procedure:
● An online exam form is designed.
● Whenever the submit button is clicked, it is directed to the jsp program.
● The jsp program is compiled and run using Apache Tomcat Server and is connected to
ansql database using jdbc driver.
● The answer for each question is fetched from the form and marks are calculated.
● The Name, register no and marks are inserted into the database using
executeUpdate().
● The row is fetched using executeQuery() and is displayed in a table as ‘ Student Mark
Sheet’.
Program:
Questionform.html
<html>
<body>
<center>Online examination</center>
<form action="exam.jsp" method="post" name="frmquestions">
<table align="center">
<tr><td colspan="2">regno</td>
<td colspan="2"><input type="text" name="txtregno" value=""></td>
</tr>
<tr><td colspan="2">name</td>
<td colspan="2"><input type="text" name="txtname" value=""></td>
</tr>
</table>
<br/>
<p>
<b>Questions</b>
</p>
<table align ="left" border="0" width="80%">
<tr><td colspan="4">1.The orginator of www is</td></tr>
<tr><td>1.<input type="radio" name="q1" value="a"/>Bill Gates</td>
<td>2.<input type="radio" name="q1" value="b"/>John Mathew</td>
<td>3.<input type="radio" name="q1" value="c"/>TimBerner Lee</td>
<td>4.<input type="radio" name="q1" value="d"/>Geroge</td>
</tr>
<tr><td colspan="4">2.The servlet lifecycle as the method</td>
</tr>
<tr><td>1.<input type="radio" name="q2" value="a"/>service</td>
<td>2.<input type="radio" name="q2" value="b"/>getinfo</td>
<td>3.<input type="radio" name="q2" value="c"/>terminate</td>
<td>4.<input type="radio" name="q2" value="d"/>initialize</td>
</tr>
<tr>
<td colspan="4">3.w3c stands for is</td>
</tr>
<tr>
<td>1.<input type="radio" name="q3" value="a"/>www corporation</td>
<td>2.<input type="radio" name="q3" value="b"/>world web consortium</td>
<td>3.<input type="radio" name="q3" value="c"/>world 3 corp</td>
<td>4.<input type="radio" name="q3" value="d"/>www console</td>
</tr>
<tr>
<td colspan="4">4.HTML stands for is</td>
</tr>
<tr>
<td>1.<input type="radio" name="q4" value="a"/>Hyper textmarkup language</td>
<td>2.<input type="radio" name="q4" value="b"/>Hyper text mark language</td>
<td>3.<input type="radio" name="q4" value="c"/>High text markup language</td>
<td>4.<input type="radio" name="q4" value="d"/>High texmarkup language </td>
</tr>
<tr>
<td colspan="4">5.TCP stands for is</td>
</tr>
<tr>
<td>1.<input type="radio" name="q5" value="a"/>Transfer control protocol</td>
<td>2.<input type="radio" name="q5" value="b"/>Transmission control
protocol</td>
<td>3.<input type="radio" name="q5" value="c"/>Transition control protocol </td>
<td>4.<input type="radio" name="q5" value="d"/>Transmission central
protocol</td>
</tr>
<tr><td colspan="4"> </td></tr>
<tr><td colspan="4"> </td></tr>
<tr><td colspan="2"><input type="submit" name="sbtans" value="Submit"/></td>
<td colspan="2"><input type="reset" name="reset" value="Reset"/></td>
</tr>
</table>
<br/>
</form>
</body>
</html>
Exam.jsp
<%@ page language ="java" import = "java.sql.*"%>
<%@ page import="java.io.*"%>
<%@ page import ="java.util.*"%>
<%
String regno="",name="";
String ans1,ans2,ans3,ans4,ans5,insquery;
intcntcorrect=0;
Connection conn = null;
Statement stmt=null;
ResultSetrs = null;
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String url="jdbc:odbc:exam";
conn = DriverManager.getConnection(url," "," ");
if (request.getParameter("txtregno") != null) {
regno = request.getParameter("txtregno");
name = request.getParameter("txtname");
ans1 = request.getParameter("q1");
if (ans1.equalsIgnoreCase("c"))
cntcorrect = cntcorrect + 2;
if (ans2.equalsIgnoreCase("a"))
if (ans3.equalsIgnoreCase("b"))
if (ans4.equalsIgnoreCase("a"))
if (ans5.equalsIgnoreCase("b"))
}
insquery = "INSERT into Studentmark values (" + regno + ",'" + name +"'," +
cntcorrect + ")";
stmt = conn.createStatement();
int result = stmt.executeUpdate(insquery);
//out.println(insquery);
stmt.close();
stmt = conn.createStatement();
String query="Select * from StudentMark where regno = "+ regno ;
rs = stmt.executeQuery(query);
%>
<html>
<body>
<center><h2> Online Examination </h2><h2 > Student Mark Sheet </h2>
<h3> Name of College : SRM Institute of Science and Technology </h3></center>
<p></p>
<table border="1" cellspacing="0" cellpadding="0" align="center" width="40%">
<tr><td> Regno </td><td> Name </td><td> Marks </td></tr>
<% while (rs.next())
{ %>
<tr><td><%= rs.getInt(1) %></td>
<td><%= rs.getString(2) %></td>
<td><%=rs.getInt(3) %></td>
<%
}
rs.close();
stmt.close();
conn.close();
%>
</table>
<br/>
<table>
<tr><td><b> Date : <%=new java.util.Date().toString() %></b></td></tr>
<tr><td><b> Signature </b><i> Manish </i></td></tr>
</table>
</body>
</html>
Output:
Result:JSP page was successfully created and linked with database.

Exp. No.: 7 JSP & AJAX Date :
AIM:
To write simple applications using JSP and AJAX.
ALGORITHM:
STEP 1: Start the program.

STEP2 :Declare title and head tag.
STEP 3:Add procedure as needed
STEP 4: Under head tag add style tag.
STEP 5 Add css description under style tag.
STEP 6: Add text detail under article tag.
STEP 7:Stop the program.
PROGRAM:
AJAX Servlet Code:
package com.journaldev.servlets;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/GetUserServlet")
public class GetUserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse

response) throws ServletException, IOException {
String userName = request.getParameter("userName").trim();
if(userName == null || "".equals(userName)){
userName = "Guest";
}
String greetings = "Hello " + userName;
response.setContentType("text/plain");
response.getWriter().write(greetings);
}}
// index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
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>jQuery, Ajax and Servlet/JSP integration example</title>
<script src="//code.jquery.com/jquery-1.10.2.js"
type="text/javascript"></script>
<script src="js/app-ajax.js" type="text/javascript"></script>
</head>
<body>
<form>
Enter Your Name: <input type="text" id="userName" />
</form>
<br>
<br>
<strong>Ajax Response</strong>:
<div id="ajaxGetUserServletResponse"></div>
</body>
</html>
app-ajax.js_code:
$(document).ready(function() {
$('#userName').blur(function() {
$.ajax({
url : 'GetUserServlet',
data : {userName : $('#userName').val()
},
success : function(responseText) {
$('#ajaxGetUserServletResponse').text(responseText);
}});});});
OUTPUT:
RESULT:
Thus a program to implement JSP and AJAX was executed and the output is verified.
Exp. No.: 8 Invoking PHP using HTML Date :
Aim: To create a HTML page to invoke PHP.

Procedure:
1. Create a Directory Structure under Xampp.
When you install Xampp, several subdirectories are automatically created under the Xampp
home directory (c:/Xampp). One of the subdirectories is htdocs. The webapps directory is
where you store your web applications. A separate directory is dedicated for each web
application. Therefore, the first thing to do when you build a web application is create an
application directory.
2. Write the Html and PHP source code in different files in the application directory. and link
the webpages together.
3. Run Xampp.
4. Start apache server from the option provided in Xampp window.
5. Call your application from a Web Browser by localhost/"application directory name"
You are ready to call your web application from a web browser. By default, Xampp0 runs on
port 80.
Program:
<html>
<head><META http-equiv="Content-Type" content="text/html; charset=utf-
8"></head>
<body>
<div>
<h1>Employee Detail</h1>
<form action="http://result.php" method="post" target="_blank" onsubmit="try
{return window.confirm("You are submitting information to an external
page.\nAre you sure?");} catch (e) {return false;}">
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<td>Employee Code</td>
<td><input type="text" name="txtcode"><br></td>
</tr>
<tr>
<td>Employee Name:</td>
<td><input type="text" name="name"><br></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="email" name="email"><br></td>
</tr>
<tr>
<td>Contact No:</td>
<td><input type="text" name="contact"><br></td>
</tr>
<tr>
<td>Basic Pay</td>
<td><input type="text" name="txtpay"></td>
</tr>
<tr>
<td>Dearness Allowance</td>
<td><input type="text" name="txtda"></td>
</tr>
<tr>
<td>House Rent Allowance</td>
<td><input type="text" name="txthra"></td>
</tr>
<tr><td colspan="2"><b> Employee Deductions</b></td></tr>
<tr>
<td>Employee Provident Fund</td>
<td><input type="text" name="txtpf"></td>
</tr>
<tr>
<td>Staff Welfare</td>
<td><input type="text" name="txtstaff"></td>
</tr>
<tr>
<td><input type="submit" name="sbtsubmit" value="Submit"></td>
<td><input type="reset" name="rstcancel" value="Cancel"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Result.php
<html>
<body>
<table align="center" border="5">
<td><?php echo "Date :".date("d/m/Y")?></td>
<td><h2 align="center">Employee - PaySlip for the Month of October
2018</h1></td>
<td><?php echo "Time :" . date("h:i:sa")?></td>
</table>
<br/> <br/>
<?php
$allowance = $_POST["txtpay"] + $_POST["txtda"] + $_POST["txthra"];
$ded =$_POST["txtpf"]+ $_POST["txtstaff"] ;
$netpay = $allowance - $ded;
?>
<table align="center" cellspacing="5" cellpadding="5">
<tr>
<td><b> Employee Code: </b></td>
<td><?php echo $_POST["name"]?></td>
</tr>
<tr>
<td><b> Employee Code: </b></td>
<td><?php echo $_POST["txtcode"]?></td>
</tr>
<tr>
<td><b> Employee Name: </b></td>
<td><?php echo $_POST["name"]?></td>
</tr>
<tr>
<td><b> Basic Pay: </b></td>
<td><?php echo $_POST["txtpay"]?></td>
</tr>
<tr>
<td><b> DA : </b></td>
<td><?php echo $_POST["txtda"]?></td>
</tr>
<tr>
<td><b> HRA : </b></td>
<td><?php echo $_POST["txthra"]?></td>
</tr>
<tr>
<td colspan="2"><b> Deductions : </b></td>
</tr>
<tr>
<td><b> EPF : </b></td>
<td><?php echo $_POST["txtpf"]?></td>
</tr>
<tr>
<td><b> Staff Welfare : </b></td>
<td><?php echo $_POST["txtstaff"]?></td>
</tr>
<tr>
<td><b> NET SALARY </td>
<td><?php echo $netpay ?></td>
</tr>
</table>
<br/>
</body>
</html>
Output:
Result: Thus, a HTML page is created to invoke PHP.

Exp. No.: 9 AJAX-Using PHP Date :
Aim: To create a simple application using AJAX and PHP.

Procedure:
● index.php is created using JavaScript and HTML.
● To handle the PHP-AJAX-Search request, frameworks.php is created.
● index.php allows the user to type a name.
● When the user starts typing a name, the string is sent to frameworks.php via
XMLHttpRequest which is present in showName().
● The frameworks.php has an array which stores all the names.
● frameworks.php compares the string typed by the user in the index.php and the names
present in the array.
● After comparing frameworks.php prints the names which matches the user typed string.
Program:
index.php
<html>
<title>PHP AJAX - Search </title>
<script type="text/javascript">
function showName(str) {
if (str.length == 0){ //exit function if nothing has been

typed in the textbox
document.getElementById("txtName").innerHTML="";
//clear previous results
return;
}
if (window.XMLHttpRequest) {// code for IE7+,
Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 &&xmlhttp.status == 200){
document.getElementById("txtName").innerHTML=xmlhttp.responseText;
xmlhttp.open("GET","frameworks.php?name="+str,true);
xmlhttp.send();
</script>
</head>
<body>
<h2>Fetch Student Names </h2>
<p><b>Type the first letter of the Student in IV Year CSE D</b></p>
<form method="POST" action="index.php">
<P> Fetching Names of Students starting on a character </p>
<p> Department : <input type='text'/></p>
<p><input type="text" size="40" id="txtHint"

onkeyup="showName(this.value)"></p>
</form>
<p>Matches: <span id="txtName"></span></p>
</body>
</html>
FRAMEWORK.php
<?php
$frameworks = array("Prateek","Aman","Aditya","Yash",
"Gupta","Bala","Charan","Chethan","Sandeep","Ankush","Singh") ;
$name = $_GET["name"];
if (strlen($name) > 0) {
$match = "";
for ($i = 0; $i< count($frameworks); $i++) {
if (strtolower($name) == strtolower(substr($frameworks[$i], 0,
strlen($name)))) {
if ($match == "") {
$match = $frameworks[$i];
} else {
$match = $match . " , " . $frameworks[$i];
echo ($match == "") ? 'no match found' : $match;
?>
Output:
Result: Thus, a simple application using AJAX and PHP was executed successfully.
Exp. No.: 10 Accessing XML Data Using DOM Date :
Aim: Simple application for accessing the data using XML-DOM Parser.
Procedure:
● A html page is designed.
● Whenever the display button is clicked, findwriter() function is called.
● The ID writersXML is defined as the XML object first, and then it becomes part of a
document, myXML, To read the first child of an element, the reference is to
document.firstChild..
● writers.xml the script just keeps adding .firstChild to each of the elements.
Program:
readFirstChild.html
<html>
<head>
<style>
body {
font-family:verdana;
color:#ff4d00;
font-size:14pt;
font-weight:bold;
background-color:#678395;
}
div {background-color:#c1d4cc;}
#blueBack {background-color:#c1d4cc}
</style>
<title>Read First Child</title>
<xml ID="writersXML"
SRC="writers.xml"></xml>
<script language="JavaScript">
functionfindWriter() {
varmyXML, writersNode, languageNode,
varpenNode,nameNode,display
myXML= document.all("writersXML").XMLDocument
writersNode = myXML.documentElement
languageNode = writersNode.firstChild
fictionNode = languageNode.firstChild
penNode = fictionNode.firstChild
nameNode = penNode.firstChild
display =nameNode.firstChild.nodeValue;
document.show.me.value=display
}
</script>
</head>
<body>
<span ID="blueBack">Read firstChild</span>
<div>
<form name="show">
<input type=text name="me">
<input type="button" value="Display Writer"
onClick="findWriter()">
</form>
</div>
</body>
</html>
writers.xml
<?xml version="1.0" ?>
<writers>
<EnglishLanguage>
<fiction>
<pen>
<name>Jane Austin</name>
<name>Rex Stout</name>
<name>Dashiell Hammett</name>
</pen>
</fiction>
</EnglishLanguage>
</writers>
Output:
Result: Thus, Simple application for accessing the data using xml is executed successfully.
Exp. No.: 11 XML – XSL Transformation Date :
Aim: To write a XSL program to transform a XML file into HTML using XSL
transformation.
Procedure:
1. Create an valid and well-formed XML document
2. Create an XSL document which will use XPATH expression to traverse through the
XML data and perform a XSLT transformation
3. The XSL document refers to the XSLT namepace in order to use the XPATH and xsl
constructs
4. The XSLT uses xsl:template is used to match to the root element of the xml and then
it uses xsl:for-each construct to loop through the XML data
5. The data fetched from the XML is constructed as a table using HTML <table> tag.
Program:
Student.xml
<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/xsl" href="Student.xsl"?>
<Students>
<person-details>
<regno>32309205001</regno>
<name>Ammu</name>
<address>K.K.Nagar</address>
<contactno>987654321</contactno>
<year>III</year>
<GPA>8.2</GPA>
</person-details>
<person-details>
<regno>32309205002</regno>
<name>Anand</name>
<year>III</year>
<GPA>7.8</GPA>
</person-details>
<person-details>
<regno>32309205003</regno>
<name>Babu</name>
<year>III</year>
<GPA>7.8</GPA>
</person-details>
<person-details>
<regno>32309205004</regno>
<name>Chandra</name>
<address>T.Nagar</address>
<year>III</year>
<GPA>7.9</GPA>
</person-details>
<person-details>
<regno>32309205005</regno>
<name>Madhavan</name>
<address>Valasi</address>
<year>III</year>
<GPA>8.0</GPA>
</person-details>
<person-details>
<regno>32309205006</regno>
<name>Vikram</name>
<address>Porur</address>
<year>III</year>
<GPA>8.5</GPA>
</person-details>
<person-details>
<regno>32309205007</regno>
<name>Bharathi</name>
<address>Valasaravakkam</address>
<year>III</year>
<GPA>7.8</GPA>
</person-details>
</Students>
Student.xsl
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Student details</h2>
<table border="1">
<trbgcolor="gray">
<th>Regno</th>
<th>Name</th>
<th>Address</th>
<th>Contact no</th>
<th>Year</th>
<th>GPA</th>
</tr>
<xsl:for-each select="Students/person-details">
<trbgcolor="pink">
<td><xsl:value-of select ="regno"/></td>
<td><xsl:value-of select ="name"/></td>
<td><xsl:value-of select ="address"/></td>
<td><xsl:value-of select ="contactno"/></td>
<td><xsl:value-of select ="year"/></td>
<td><xsl:value-of select ="GPA"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Output:
Result: Thus an XSL program is written to transform a XML document into HTML using
XSLT.
Exp. No.: 12 Factorial Web Service Date :
Aim: To create Factorial Web service using J2EE and consuming it using J2EE Client.
Procedure:
Step 1: Creating Web Application
1. Go to File Menu ->New Project->Choose Java Web->Select Web Application
(Choose Project)
2. Click Next
3. Specify Project Name as FactorialServer (Name and Location)
4. Click Next
5. Click Next (Server and Settings)
6. Click Finish (Frameworks)
7. Now the Web Application FactorialServer is created.
Step 2: Creating Web Service and Adding Operations

1. Right Click on FactorialServer in Projects Pane -> Choose New ->Web Service.
2. In the Name and Location Pane, specify Web Service Name as Factorial& Package
name as lab.
3. Then click Finish.
4. Go to Web Services folder in FactorialServer ->RightClick on Factorial ->Click
AddOperation.
5. Specify Name as findFactorial and Return Type of the operation as long.
6. Using Add button, specify Name as n and Type of the parameter as int.
7. Click Ok.
8. Add appropriate coding to the operation.
Step 3: Deploying the Server Application

1. Now RightClick on FactorialServer and click Deploy to deploy it.
Step 4: Testing Web Services.

1. Now Go to Web Services folder in FactorialServer ->RightClick on Factorial -
>Click Test Web Service.
2. .Now the browser window will open, and give appropriate value.
3. Click the findFactorial button to find the result.
Consuming Web Service
Step 1: Creating Web Application
1. Go to File Menu ->New Project->Choose Java Web->Select Web Application
(Choose Project)
2. Click Next
3. Specify Project Name as FactorialClient (Name and Location)
4. Click Next
5. Click Next (Server and Settings)
6. Click Finish (Frameworks)
7. Now the Web Application FactorialClient is created.
8. Create form in the index.jsp to accept user inputs.
Step 2: Create Web Service Client

1. Right Click on FactorialClient in Projects Pane -> Choose New ->Web
ServiceClient.
2. Specify the WSDL file of the Web Service. (In the ProjectRadioButton, using
Browse option finds & selects the Factorial Web Service.)
Step 3: Create Process.jsp to invoke the Web Service
1. Add appropriate code
Step 4: Add Web Reference

1. Right-Click on the Process.jsp code window, choose Web Service Client Resources
-> click Call Web Service Operation.
2. In the Available Web Service References pane, select the operation findFactorial.
3. Click Ok.
4. Web Service Invocation code is automatically generated now.
5. Make appropriate changes to automatically generated code.
Step 5: Deploying the Client Application
1. Now RightClick on FactorialClient and click Deploy to deploy it.

2. Now RightClick on index.jsp and click Run to execute it.
Program:
/* FactorialWebService.java*/
package lab;
importjavax.jws.WebMethod;
importjavax.jws.WebParam;
importjavax.jws.WebService;
@WebService()
public class Factorial {
/*Web service operation */
@WebMethod(operationName = "findFactorial")
public long findFactorial(@WebParam(name =
"n") int n) {
long fact=1;
for(inti=1;i<=n;i++)
fact=fact*i;
return fact;
}
}
/* USER FORM – index.jsp*/

<%--
Document : index
Created on : Aug 18, 2011, 7:39:44 PM
Author : acer
--%>
<%@page contentType="text/html" pageEncoding="UTF-

8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Factorial Web Service</title>
</head>
<body>
<h1>Factorial Web Service</h1>
<form action="Process.jsp" method="post">
Enter the value:<input name="value1" type="text"
/><br/><input name="ok" type="submit"
value="FindFactorial" /></form>
</body>
</html>
/* CALLING WEB SERVICE – Process.jsp*/

<%--
Document : Process
Created on : Aug 18, 2011, 7:45:40 PM
Author : acer
--%>
<%@page contentType="text/html" pageEncoding="UTF-

8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"><title>Factorial Web Service</title></head>
<body>
<h1>Factorial Web Service</h1>
<%
String n1=request.getParameter("value1");
Intnn=Integer.parseInt(n1);
%>
<%-- start web service invocation --%><hr/>
<%
try {
lab.FactorialService service = new
lab.FactorialService(); lab.Factorial port =
service.getFactorialPort();
// TODO initialize WS operation
arguments here int n = nn;
// TODO process result here
long result = port.findFactorial(n);
out.println("Result = "+result);
} catch (Exception ex) {
ex.printStackTrace();
}%>
<%-- end web service invocation --%><hr/>
</body>
</html>
Output:
Result:The Java Web Service has been successfully tested and implemented.

WP Record - 1.5 - FNL

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

WP Record - 1.5 - FNL

Hochgeladen von

Copyright:

Verfügbare Formate

Exp. No.

: 1 HTML Semantic Elements Date :

Aim:To design a webpage using the HTML Semantic Elements.

The <article>element specifies independent, self-contained content.

Examples of where an <article> element can be used:

RESULT:Thus, a webpage is designed using the semantic elements.

Aim: Write a code for HTML5 Media Elements.

Result:The code for HTML5 media elements run successfully.

Aim: Design a dynamic web page with validation using JavaScript.

Aim:Write a program to invoke a servlet from HTML form.

3. Compile Your Source Code

public class StudentServlet extends GenericServlet

Result:The program to invoke a servlet from HTML form is successfully executed.

Result:JSP page was successfully created and linked with database.

To write simple applications using JSP and AJAX.

STEP 1: Start the program.

AJAX Servlet Code:

protected void doGet(HttpServletRequest request, HttpServletResponse

Aim: To create a HTML page to invoke PHP.

Result: Thus, a HTML page is created to invoke PHP.

Aim: To create a simple application using AJAX and PHP.

<title>PHP AJAX - Search </title>

if (str.length == 0){ //exit function if nothing has been

if (xmlhttp.readyState == 4 &&xmlhttp.status == 200){

<h2>Fetch Student Names </h2>

<p><b>Type the first letter of the Student in IV Year CSE D</b></p>

<form method="POST" action="index.php">

<P> Fetching Names of Students starting on a character </p>

<p> Department : <input type='text'/></p>

<p><input type="text" size="40" id="txtHint"

<p>Matches: <span id="txtName"></span></p>

for ($i = 0; $i< count($frameworks); $i++) {

$match = $match . " , " . $frameworks[$i];

echo ($match == "") ? 'no match found' : $match;

● Whenever the display button is clicked, findwriter() function is called.

document, myXML, To read the first child of an element, the reference is to

XML data and perform a XSLT transformation

it uses xsl:for-each construct to loop through the XML data

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

Step 2: Creating Web Service and Adding Operations

Step 3: Deploying the Server Application

Step 4: Testing Web Services.

Step 2: Create Web Service Client

Step 4: Add Web Reference

Step 5: Deploying the Client Application

1. Now RightClick on FactorialClient and click Deploy to deploy it.

/* USER FORM – index.jsp*/

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

/* CALLING WEB SERVICE – Process.jsp*/

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

Das könnte Ihnen auch gefallen