Scribd
Upload
2K views

Cs8661-Internet Programming Laboratory

The document describes creating web pages using HTML and JavaScript: 1) An HTML page is created with an image map to display information about different states in India when users click on hotspots in the map. Separate HTML pages are created for each state with details. 2) JavaScript is used to validate a registration form by checking the length and matching of username and password fields. 3) Payment by credit card is validated using JavaScript by checking the credit card number, expiration date and other fields.

Uploaded by

HEMAN KARTHIK V
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2K views

Cs8661-Internet Programming Laboratory

The document describes creating web pages using HTML and JavaScript: 1) An HTML page is created with an image map to display information about different states in India when users click on hotspots in the map. Separate HTML pages are created for each state with details. 2) JavaScript is used to validate a registration form by checking the length and matching of username and password fields. 3) Payment by credit card is validated using JavaScript by checking the credit card number, expiration date and other fields.

Uploaded by

HEMAN KARTHIK V
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 65

Ex.

No:1
WEB PAGE CREATION USING HTML
Date:

Aim:
To create a web page which includes a map and display the related
information when a hot spot is clicked in the map.

Procedure:
 Create a html file with map tag
 Set the source attribute of the img tag to the location of the image and
also set the use map attribute
 Specify an area with name, shape and href set to the appropriate values
 Repeat step 3 as many hot spots you want to put in the map
 Create html files for each and every hot spot the user will select

Program:
ImageMap.html
<HTML>
<HEAD>
<TITLE>Image
Map</TITLE> </HEAD>

<BODY>
<img src="india_map.jpg" usemap="#metroid"
ismap="ismap" > <map name="metroid" id="metroid">

<area href='TamilNadu.html' shape='circle' coords='175,495,30'


title='TamilNadu'/>

<area href = "Karnataka.html" shape = "rect" coords = "100,400,150,450" title =


"Karnataka" /> <area href = "AndhraPradesh.html" shape = "poly" coords =
"150, 415, 175,348,265,360,190,420,190,440" title = "Andhra Pradesh" />

<area href = "Kerala.html" shape = "poly" coords =


"108,455,150,515,115,490,148,495,110,448,155,50
1" title = "Kerala" /> </map>
</BODY>
</HTML>
TamilNadu.html
<HTML>
<HEAD>
<TITLE>About Tamil Nadu</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Tamil Nadu</H1></CENTER> <HR>
<UL>

<LI>Area : 1,30,058 Sq. Kms.</LI>


<LI>Capital : Chennai</LI>
<LI>Language : Tamil</LI>
<LI>Population : 6,21,10,839</LI> </UL><hr>

<a href='ImageMap.html'>India Map</a>


</BODY>
</HTML>

Karnataka.html
<HTML>
<HEAD>
<TITLE>About Karnataka</TITLE> </HEAD>
<BODY>
<CENTER><H1>Karnataka</H1></CENTER>
<HR>
<UL>

<LI>Area : 1,91,791 Sq. Kms</LI>


<LI>Capital : Bangalore</LI>
<LI>Language : Kannada</LI>
<LI>Population : 5,27,33,958</LI>
</UL>
<hr>
<a href='ImageMap.html'>India Map</a>
</BODY>
</HTML>

AndhraPradesh.html
<HTML>
<HEAD>
<TITLE>About Andhra Pradesh</TITLE> </HEAD>
<BODY>
<CENTER><H1>Andhra Pradesh</H1></CENTER> <HR>
<UL>

<LI>Area : 2,75,068 Sq. Kms</LI>


<LI>Capital : Hyderabad</LI>
<LI>Language : Telugu</LI>
<LI>Population : 7,57,27,541</LI>
</UL>
<hr>
<a href='ImageMap.html'>India Map</a>
</BODY>
</HTML>

Kerala.html
<HTML>
<HEAD>
<TITLE>About Kerala</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Kerala</H1></CENTER>
<HR>
<UL>
<LI>Area : 38,863 Sq. Kms.</LI>
<LI>Capital : Thiruvananthapuram</LI>
<LI>Language : Malayalam</LI>
<LI>Population : 3,18,38,619</LI>
</UL>
<hr>

<a href='ImageMap.html'>India Map</a>


</BODY>
</HTML>
Output:
Result:
Thus the creation of a web page which includes a map and display the
related in-formation when a hot spot is clicked in the map was executed
successfully.
Ex.No:2
CASCADING STYLE SHEETS
Date:

Aim:
To create a web page that displays college information using various style
sheet

Procedure:
 Create a web page with frame sets consisting two frames
 In the first frame include the links
 In the second frame set display the web page of the link
 Create a external style sheets
 Create a embedded style sheets
 Create a inline and internal style sheets and make it link to the external
style sheets

Program:

CSS CODE:
External.css
h3{font-family:arial;font-size:20;color:red}
table{border-color:green}
td{font-size:20pt;color:magenta}

HTML CODE:
Style.html
<html>
<head><h1><center>ALL STYLE SHEETS</center></h1>
<title>USE of STYLESHEETS
</title>
<link rel="stylesheet" href="External.css" type="text/css"> <!-- External Style
Sheet -->
<style type="text/css"> <!-- Internal Style
Sheet -->
.S1{font-family:verdana; font-style:italic; color:red; text-align:center}
.S2{font-family:tahoma; font-style:italic; font-size:20; text-align:center;}
font{font-family:georgia; color:blue; font-size:20}
ul{list-style-type:circle}
</style>
</head>
<body>
<ol style="list-style-type:lower-alpha">
<b> Anna University </b><br><br><br>
<li> University College of Engineering, Nagercoil
<li> University College of Engineering, Nellai
<li> University College of Engineering, Tuticorin
</ol>

<p style="font-size:20pt;color:purple">
University College of Engineering</p> <!-- InlineStyle Sheet -->
<p class="S2"> Run by Anna University, Chennai<br>
It is approved by AICTE.
<br>
</p>
<h2 class="S1"> University College of Engineering</h2>
<br>
<font>Located in Konam, Nagercoil</font><br>
<br>
<font>
<h2>List of Courses offered</h2>
<ul>
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
<li>EEE</li>
<li>MECH</li>
<li>Civil</li>
</ul>
</font>
<h3>Pass percentage in year 2015</h3>
<table width="100%" cellspacing="2" cellpadding="2" border="5">
<tr>
<th>Sl.No</th>
<th>Dept</th>
<th>Pass Percentage</th>
</tr>
<tr>
<td align="center">1</td>
<td align="center">CSE</td>
<td align="center">80</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">ECE</td>
<td align="center">78</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">Mech</td>
<td align="center">75</td>
</tr>

</table>
</body>
</html>

Output:

Result:
Thus the creation of a web page that displays college information using
various style sheet was successfully executed and verified.
Ex.No:3
VALIDATE THE REGISTRATION USING JAVASCRIPT
Date:

Aim:
To Validate the Registration, user login and payment by credit card pages
using JavaScript.

Procedure:
 Create a Registration form using java script tag
 In that get basic User information using label, textbox and buttons.
 Create user login using java script tag.
 In that get login and password.
 Create Payment by credit card page using java script tag.
 In that specify payment Method.

Program:
Registration:
<html>
<head><title>
register</title>
<SCRIPT LANGUAGE="JAVASCRIPT">
function essentials_of_validation(form1)
{
var return_value=true;
var username1=form1.txtusername1.value;
var username2=form1.txtusername2.value;
var password1=form1.txtpassword1.value;
var password2=form1.txtpassword2.value;
if(username1.length < 8)
{
return_value=false;
window.alert("user name less than 8 chars");
}
if(username1==username2)
{
return_value=false;
window.alert("both ids are same");
form1.txtusername2.value="";
}
if(password1.length<6)
{
return_value=false;
window.alert(" pwd should be > 6 char's ");
form1.txtpassword1.value="";
form1.txtpassword2.value="";
}
if(password1!=password2)
{
return_ value=false;
window.alert("ur password mismatched ");
form1.txtpassword1.value="";
form1.txtpassword2.value="";
}
return return_value;
}
</script>
</head>
<body BGCOLOR="YELLOW">
<CENTER><u>
DEV BHOOMI INSTITUTE OF TECHNOLOGY
LAB MANUAL
Course Name: Web Technology Lab
Experiment No. 2
Course Code : PCS-852
Faculty : Ms. Abhilasha Rathore
Branch: CSE Semester: 8
<marquee><font name="mistral" size="+1">REGISTRATION
FORM</font></marquee>
</u></center>
<form name="form1" onSubmit="essentials_of_validation(this)">
Name:<input name="name" type="text" size="10">
<br>
Age:<input type="text" size="3">
<br>
Sex:<br>
<input name ="gen" type="radio" value="male">male
<input name="gen" type="radio" value="female">female
<br>
Address:<textarea name="address" rows="3" cols="3"></textarea>
<br>
Enter e-mail id u want :<sup>*</sup>
<input type="text" name="txtusername1" size="15">
<br>
Password:<sup>*</sup>
<input type="Password" name="txtpassword1" size="15">(password should
exceed 6 characters)
<br>
Confirm password:<input type="password" name="txtpassword2" size=20>
<br>
Alternate mail:<sup>*</sup>
<input type="text" name="txtusername2" size="15">
<br>
Known This Site Through
<br>
<input name="things" type="checkbox" value="srts"> internet
<input name="things" type="checkbox" value="sp">newspapers
<input name="things" type="checkbox" value="spor"> friends
<br>
Rate ur site
<select name="rating">
<option selected>good
<option>average
<option>bad
<option>no rating
</select><br>
Enter the code<input name="code" type="text" size="5">
<table border="1" width="10%" height="10%">
<thead><tr><th>
1123</th></tr>
</thead>
</table>
<br>
<input type="submit" value="submit ">
<input type ="reset" value="clear ur entries">
</form>
<font size="+1">
<A Href="E:\cs540\online.html">Home</A>
<A Href="E:\cs540\user.html">Login</A>
</font>
</body>
</html>
User Login:
<html>
<head>
<SCRIPT LANGUAGE="JAVASCRIPT">
function essentials_of_validation(form1)
{
var return_value=true;
var username=form1.txtusername.value;
var password1=form1.txtpassword1.value;
var password2=form1.txtpassword2.value;
if(username.length < 8)
{
return_value=false;
window.alert("user name less thn 8 chars");
}
if(password1.length<6)
{
return_value=false;
window.alert(" pwd should be > 6 char's ");
form1.txtpassword1.value="";
form1.txtpassword2.value="";
}
if(password1!=password2)
{
return_value=false;
window.alert("ur password mismatched ");
form1.txtpassword1.value="";
form1.txtpassword2.value="";
}
return return_value;
}
</script>
</head>
<body bgcolor="skyblue">
<marquee><b><u><font face="comic sans ms" color="light blue">login
here</font></u></b></marquee>
<form name="form1" onSubmit="essentials_of_validation(this)">
Username <input type="text" name="txtusername" size=20>
<br>Password: <input type="password" name="txtpassword1" size=20>
<br>Confirm password:<input type="password" name="txtpassword2"
size=20>
<br><br>
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
</body>
</html>

Payment by credit card:


<html>
<head><title>
payment</title>
<SCRIPT LANGUAGE="JAVASCRIPT">
function essentials_of_validation(form1)
{
var current=new Date();
var return_value=true;
var username=form1.txtusername.value;
var password1=form1.txtpassword1.value;
var a=form1.dd.value;
var b=form1.mm.value;
var c=form1.yyyy.value;
if(isNaN(username))
{
window.alert("Not a valid account number");
}
if(a<32 && b<13&& c>=current.getFullYear())
{
if(c>current.getFullYear())
{
window.alert(" you are validated");
}
else if(c=current.getFullYear())
{
if(b>current.getMonth())
{
window.alert(" you are validated");
}
else if(b=current.getMonth())
{
if(a>current.getDate())
{
window.alert("you are validated");
}
}
}
else
{
window.alert("Your card has expired");
}
}
else
{
window.alert(" card has expired");
}
}
</script>
</head>
<body bgcolor="pink">
<marquee><strong>Enjoy the Shopping with special
Offers</strong></marquee>
<form name="form1" onSubmit="essentials_of_validation(this)">
<font size="+2">
Payment Through
<br>
<input name="pay" type="radio" >Credit card
<input name="pay" type="radio" >Debit card
<br>
Bank
<select name="bank">
<option selected>sbi
<option>HSBC
<option>ICICI
<option>others
</select>
<br>
Account/Card number:
<input name="txtusername" type="textbox">
<br>
Net banking id/Password<input name="txtpassword1" type="password">
<br>
Enter date of expiryof account/card<input name="dd" type="text" size=2>(dd)
<input name="mm" type="text" size=2>(mm)
<input name="yyyy" type="text" size=4>(yyyy)
<br>
<input type="submit" value="Accept">
<input type="reset" value="Reject">
</form>
<A Href="e:\cs540\online.html">Home</A>
<br><A Href="e:\cs540\shop.html">back</A>
</body>
</html>

Output
Result:
To learn the process to Validate the Registration, user login and payment
by credit card pages using JavaScript.
Ex.No:4(i)
INVOKING SERVLET FROM HTML FORMS
Date:

AIM:
To write a java program for invoking servlet from HTML form.

Procedure:
 Start the program.
 Create the form as ResponseDemoServlet with textfield,submit
 Button and reset button.
 The class ResponseDemoServlet implements the interface servlet.
 Create the out object for the PrintWriter class and call the method
 Getwriter as response.getwriter.
 Display the server port, server name, protocol, character encoding,
content length.
 Create the class as enumeration with parameters as object.
 Stop the program.

SOURCE CODE:
Client Page:
<HTML>
<HEAD>
<TITLE>Sending a request</TITLE>
</HEAD>
<BODY>
<FORM ACTION= ResponseDemoServlet METHOD="POST">
<BR><BR>
Author: <INPUT TYPE="TEXT" NAME="Author">
<INPUT TYPE="SUBMIT" NAME="Submit">
<INPUT TYPE="RESET" VALUE="Reset">
</FORM>
</BODY>
</HTML>
Server Page:
importjavax.servlet.*;
importjava.io.PrintWriter;
importjava.io.IOException;
importjava.util.Enumeration;
public class ResponseDemoServlet implements Servlet {
public void init(ServletConfigconfig) throws ServletException {
} public void destroy() { }
public void service(ServletRequest request, ServletResponse response)
throwsServletException, IOException {
PrintWriter out = response.getWriter();
out.println("<HTML>");
out.println("<HEAD>");
out.println("<TITLE>");
out.println("ServletResponse");
out.println("</TITLE>");
out.println("</HEAD>");
out.println("<BODY>");
out.println("<B>Demonstrating the ServletResponse object</B>");
out.println("<BR>");
out.println("<BR>Server Port: " + request.getServerPort());
out.println("<BR>Server Name: " + request.getServerName());
out.println("<BR>Protocol: " + request.getProtocol());
out.println("<BR>Character Encoding: " + request.getCharacterEncoding());
out.println("<BR>Content Type: " + request.getContentType());
out.println("<BR>Content Length: " + request.getContentLength());
out.println("<BR>Remote Address: " + request.getRemoteAddr());
out.println("<BR>Remote Host: " + request.getRemoteHost());
out.println("<BR>Scheme: " + request.getScheme());
Enumeration parameters = request.getParameterNames();
while (parameters.hasMoreElements()) {
String parameterName = (String) parameters.nextElement();
out.println("<br>Parameter Name: " + parameterName);
out.println("<br>Parameter Value: " +
request.getParameter(parameterName));
}
Enumeration attributes = request.getAttributeNames();
while (attributes.hasMoreElements()) {
String attribute = (String) attributes.nextElement();
out.println("<BR>Attribute name: " + attribute);
out.println("<BR>Attribute value: " + request.getAttribute(attribute));
}
out.println("</BODY>");
out.println("</HTML>");
}
public String getServletInfo() {
return null;
}
publicServletConfiggetServletConfig() {
return null;
}
}
OUTPUT:

RESULT:
Thus the program for invoking servlet from HTML form was executed
and the output was verified.
Ex.No:4(ii)
SESSION TRACKING USING HIDDEN FORM FIELDS
Date:

Aim:
To perform session tracking using hidden form fields.
Procedure:
 Create a html file which contains user information.
 The first servlet will receive these values.
 First servlet stores them in the hidden form fields.
 The second servlet will display the user information with greeting message.

Program:
HTML CODE
<html>
<head>
<title>Session Tracking Using Hidden Form Field</title>
</head>
<body>
<form action="Servlet1">
Enter Name:<input type="text" name="username"/><br/>
Enter city:<input type="text" name="usercity"/><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>

SERVLET1
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Servlet1 extends HttpServlet
{
public void doGet(HttpServletRequest request,HttpServletResponse response)
{
try
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String n=request.getParameter("username");
String c=request.getParameter("usercity");
out.print("<form action=\"Servlet2\">");
out.print("<input type='hidden' name='uname' value="+n+"'>");
out.print("<input type='submit' value='Just click here'>");
out.print("</form>");
out.close();
}
catch(Exception e)
{
System.out.println(e);
}
}
}

SERVLET2
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class Servlet2 extends HttpServlet


{
public void doGet(HttpServletRequest request,HttpServletResponse response)
{
try
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String n=request.getParameter("uname");
out.println("Hello"+n);
String c=request.getParameter("usercity");
out.print("you are from"+c);
out.close();
}
catch(Exception e)
{
System.out.println(e);
}
}
}
Output

Result:
Thus the Java Program for Session Tracking Using Hidden Form Fields
has been executed successfully.
Ex.No:5
THREE-TIER APPLICATIONS USING SERVLETS
Date:

Aim:
To write java servlet programs to conduct online examination and to
display student mark list available in a database

Procedure:
Client:
 In index.html on the client side declare the contents that you like to
transfer to the server using html form and input type tags.
 Create a submit button and close all the included tags.

Server:
 Import all necessary packages
 Define a class that extends servlet

 In the doPost() method, do the following:


i) Set the content type of the response to "text/html"
ii) Create a writer to the response
iii) Get a paratmeter from the request
iv) If its value is equal to right answer then add 5 to mark variable
v) Similarly repeat step
vi) for all parameters
vii) Display the result in an html format using the writer

Student Mark List Database:


 Import necessary to java packages and javax packages and classes
 Create a class that extends HttpServlet and implements ServletException
 and IOException
 In the doGet() method, do the following:
i) Create a PrintWriter object
ii) Open a connection with the data source name
iii) Write a sql query and execute to get the resultset
iv) Display the resultset information in html form
Program:

SERVLET CODE:

import java.io.*;
import java.sql.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class StudentServlet3 extends HttpServlet
{
String message,Seat_no,Name,ans1,ans2,ans3,ans4,ans5; int Total=0;
Connection connect; Statement stmt=null; ResultSet rs=null;
public void doPost(HttpServletRequest request,HttpServletResponse response)
throws ServletExcep-tion,IOException
{
try
{
String url="jdbc:odbc:NEO"; Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
connect=DriverManager.getConnection(url," "," "); message="Thank you for
participating in online Exam";
}
catch(ClassNotFoundException cnfex){ cnfex.printStackTrace();
}
catch(SQLException sqlex){ sqlex.printStackTrace();
}
catch(Exception excp){ excp.printStackTrace();
}
Seat_no=request.getParameter("Seat_no"); Name=request.getParameter("Name");
ans1=request.getParameter("group1"); ans2=request.getParameter("group2");
ans3=request.getParameter("group3"); ans4=request.getParameter("group4");
ans5=request.getParameter("group5"); if(ans1.equals("True"))
Total+=2;
if(ans2.equals("False"))
Total+=2;
if(ans3.equals("True"))

Total+=2;

if(ans4.equals("False"))
Total+=2;
if(ans5.equals("False"))
Total+=2; try
{
Statement stmt=connect.createStatement();
String query="INSERT INTO student("+"Seat_no,Name,Total"+") VAL-
UES('"+Seat_no+"','"+Name+"','"+Total+"')";
int result=stmt.executeUpdate(query); stmt.close();
}catch(SQLException ex){
}
response.setContentType("text/html"); PrintWriter out=response.getWriter();
out.println("<html>"); out.println("<head>"); out.println("</head>");
out.println("<body bgcolor=cyan>"); out.println("<center>");
out.println("<h1>"+message+"</h1>\n");
out.println("<h3>Yours results stored in our database</h3>");
out.print("<br><br>");
out.println("<b>"+"Participants and their Marks"+"</b>"); out.println("<table
border=5>");

try
{
Statement stmt=connect.createStatement(); String query="SELECT * FROM
student"; rs=stmt.executeQuery(query); out.println("<th>"+"Seat_no"+"</th>");
out.println("<th>"+"Name"+"</th>"); out.println("<th>"+"Marks"+"</th>");
while(rs.next())
{
out.println("<tr>");
out.print("<td>"+rs.getInt(1)+"</td>");
out.print("<td>"+rs.getString(2)+"</td>");
out.print("<td>"+rs.getString(3)+"</td>");
out.println("</tr>");
}
out.println("</table>");
}
catch(SQLException ex){ } finally
{
try
{
if(rs!=null)
rs.close();
if(stmt!=null)
stmt.close();
if(connect!=null)
connect.close();
}
catch(SQLException e){ }
}
out.println("</center>");
out.println("</body></html>");
Total=0;
}
}

HTML CODE:
<html>
<head>
<title>Database Test</title>
</head>
<body>
<center><h1>Online Examination</h1> </center>
<form action="StudentServlet3.view" method="POST"> <div
align="left"><br></div>
<b>Seat Number:</b> <input type="text" name="Seat_no"> <div
align="Right">
<b>Name:</b> <input type="text" name="Name" size="50"><br> </div>
<br><br>
<b>1. Every host implements transport layer.</b><br/> <input type="radio"
name="group1" value="True">True <input type="radio" name="group1"
value="False">False<br>
<b>2. It is a network layer's responsibility to forward packets reliably from
source to destina-tion</b><br/>
<input type="radio" name="group2" value="True">True
<input type="radio" name="group2" value="False">False<br>
<b>3. Packet switching is more useful in bursty traffic</b><br/> <input
type="radio" name="group3" value="True">True<input type="radio"
name="group3" value="False">False<br> <b>4. A phone network uses packet
switching</b><br/> <input type="radio" name="group4" value="True">True
<input type="radio" name="group4" value="False">False<br>
<b>5. HTML is a Protocol for describing web contents</b><br/> <input
type="radio" name="group5" value="True">True

<input type="radio" name="group5" value="False">False<br> <br><br><br>


<center>
<input type="submit" value="Submit"><br><br> </center>
</form></body></html>
Output:

Result:
Thus to write java servlet programs to conduct online examination and to
display student mark list available in a database was successfully executed and
verified.
Ex.No:6 CONVERTING STATIC WEB PAGES TO DYNAMIC
Date: WEB PAGES

Aim:
To convert the static web pages into dynamic web pages using servlets
(or JSP) and cookies.

Procedure:
step1: we will create a html form for entering the user name,password
and card ID.
Step2:From the above HTML form, the servlet program is invoked in
which the validity of the user name,password and card id is checked.if it is a
valid user then the welcome message will be displayed otherwise the “invalid
user” message will be displayed. In this servlet we set the cookies in which the
current user name is stored.
Step3: compile the above servlet Login servlet.java and copy its class file
in tomcats folder at c:\tomcatdirectory\webapps\examples\WEB-INF\classes.
Then edit the web.xml in WEB-INF folder.We must store he user
information such as user name,password and card id in the web.xml using init-
param.
Step4: On successful login , the information from the cookie is checked
and shopping cart page for corressponding user can be displayed.
Step5:Compile the above servlet LoginSuccess.java and copy its class
file in the tomcat's folder at c:\tomcatdirectory\webapps\examples\WEB-
INF\classes.
Then edit the web.xml in WEB-INF folder.
Step6:Start tomcat web server.Open the web browser and display the
login form created in step1.
Program:
Index.jsp
<html>
<head>
<body>
<form action="http://localhost:8084/ddd/LoginServlet" method="post">
Enter username:
<input type="text" value""name="user">
<br>
Enter Password:
<input type="password" value""name="password">
<br>
Enter Card ID:
<input type="text" value""name="cardID">
<br>
<br> <br> <br>
<input type="submit" value="login">
</form>
</body>

Loginservlet.html
import java.io.*;
import java.net.*;

import javax.servlet.*;
import javax.servlet.http.*;
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {

String usr=request.getParameter("user");
String pwd=request.getParameter("password");
String card=request.getParameter("cardID");
boolean flag=true;

String[] userID=getInitParameter("usernames").split(",");
String[] password=getInitParameter("passwords").split(",");
String[] cardids=getInitParameter("cardIDs").split(",");

int i;
for(i=0;i<userID.length;i++)
{

if(userID[i].equals(usr)&&password[i].equals(pwd)&&cardids[i].equals(card))
{
flag=false;
Cookie MyCookie=new Cookie("CurrentUser", usr);
MyCookie.setMaxAge(60*60);
response.addCookie(MyCookie);
response.sendRedirect("http://localhost:8084/ddd/LoginSuccess");
}
}
if(flag==true)
{
out.print("Error");
out.println("<h4>Invalid user,please try again by clicking following
link</h4>");
out.println("<a
href='http://localhost:8084/ddd/'>"+"LoginForm.html");
}
}
finally {
out.close();
}
}

LoginSuccess.java
import java.io.*;
import java.net.*;

import javax.servlet.*;
import javax.servlet.http.*;
public class LoginSuccess extends HttpServlet {protected void
doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Cookie[] my_cookies=request.getCookies();
response.setContentType("text/html");
PrintWriter out=response.getWriter();
out.print("Login Success");
out.println("<b>");
String userName=null;
if(my_cookies!=null)
{
for(Cookie cookie:my_cookies)
{
if(cookie.getName().equals("currentUser"))
userName=cookie.getValue();
}
}
out.print("<h3>Login Success!!!Welcome</h3>");
out.print("<h2>This is a Shopping cart for"+userName+"</h2>");
out.close();

}
}

Web.xml
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>LoginServlet</servlet-class>
<init-param>
<param-name>usernames</param-name>
<param-value>user1,user2,user3</param-value>
</init-param>
<init-param>
<param-name>passwords</param-name>
<param-value>pwd1,pwd2,pwd3</param-value>
</init-param>
<init-param>
<param-name>cardIDs</param-name>
<param-value>111,222,333</param-value>
</init-param>
</servlet>
<servlet>
<servlet-name>LoginSuccess</servlet-name>
<servlet-class>LoginSuccess</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/LoginServlet</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>LoginSuccess</servlet-name>
<url-pattern>/LoginSuccess</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

Output:
Result:
Thus the conversion of the static web pages into dynamic web pages using
servlets cookies has been executed successfully.
Ex.No:7
BOOKS CATALOGUE
Date:

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:
 Create your own directory under tomcat/webapps (e.g. tr1)
 Copy the html files in tr1
 Copy the jsp files also into tr1
 Start tomcat give the following command
 Catalina.bat run
 At install‐dir/bin
 at I.E give url as http://localhost:8081/tr1/main.html .

Program:
index.html:
<!DOCTYPE html>
<!--
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.
-->
<html>
<head>
<title>Book Catalog</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h3>ABC Book Store </h3>
<hr>
<a href="http://localhost:8080/WebApplication2/bookdisplay.jsp"> View All
Books
</a><BR>
<TABLE>
<TR>
<TD><FORM
ACTION="http://localhost:8080/WebApplication2/booksearch.jsp"
method="get" >
Enter the Book title to search <input type="text" name ="bname" value="">
<button type="submit">Search</button></TD>
</TR>
</TABLE>
</body>
</html>

Bookdisplay.jsp:
<%--
Document : bookdisplay
Created on : 4 Apr, 2020, 6:06:32 PM
Author : ELCOT
--%>
<%@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">
<%@ page import="java.sql.*" %>
<%@ page import="java.io.*" %>
<html>
<head>
<title>display data from the table using jsp</title>
</head>
<body>
<h2>Book Catalog</h2>
<%
try {
// declare a connection by using Connection interface
Connection connection = null;
/* declare object of Statement interface that is used for executing sql
statements. */
Statement statement = null;
// declare a resultset that uses as a table for output data from tha table.
ResultSet rs = null;
// Load JBBC driver "com.mysql.jdbc.Driver"
Class.forName("org.apache.derby.jdbc.ClientDriver").newInstance();
connection =
DriverManager.getConnection("jdbc:derby://localhost:1527/iplab", "root",
"root");
/* createStatement() is used for create statement object that is used for
sending sql statements to the specified database. */
statement = connection.createStatement();
// sql query to retrieve values from the secified table.
String QueryString = "SELECT * from bookdb";
rs = statement.executeQuery(QueryString);
%>
<TABLE cellpadding="15" border="1" style="background-color: #ffffcc;">
<%
while (rs.next()) {
%>
<TR>
<TD><%=rs.getInt(1)%></TD>
<TD><%=rs.getString(2)%></TD>
<TD><%=rs.getString(3)%></TD>
<TD><%=rs.getString(4)%></TD>
<TD><%=rs.getString(5)%></TD>
</TR>
<% } %>
<%
// close all the connections.
rs.close();
statement.close();
connection.close();
} catch (Exception ex) {
%>
</font>
<font size="+3" color="red"></b>
<%
out.println("Unable to connect to database.");
}
%>
</TABLE><TABLE>
<TR>
<TD><FORM ACTION="index.html" method="get" >
<button type="submit"><-- back</button></TD>
</TR>
</TABLE>
</font>
</body>
</html>
Booksearch.jsp:
<%--
Document : booksearch
Created on : 4 Apr, 2020, 6:12:14 PM
Author : ELCOT
--%>
<%@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">
<%@ page import="java.sql.*" %>
<%@ page import="java.io.*" %>
<html>
<head>
<title>display data from the table using jsp</title>
</head>
<body>
<h2>Book Catalog</h2>
<%
try {
/* Create string of connection url within specified format with machine
name, port number and database name. Here machine name id localhost and
database name is student. */
String connectionURL = "jdbc:derby://localhost:1527/iplab";
// declare a connection by using Connection interface
Connection connection = null;
/* declare object of Statement interface that is used for executing sql
statements. */
Statement statement = null;
// declare a resultset that uses as a table for output data from tha table.
ResultSet rs = null;
// Load JBBC driver "com.mysql.jdbc.Driver"
Class.forName("org.apache.derby.jdbc.ClientDriver").newInstance();
/* Create a connection by using getConnection() method that takes parameters
of string type connection url, user name and password to connect to database.*/
connection = DriverManager.getConnection(connectionURL, "root", "root");
/* createStatement() is used for create statement object that is used for
sending sql statements to the specified database. */
statement = connection.createStatement();
String ss= request.getParameter("bname");
// sql query to retrieve values from the secified table.
String QueryString = "SELECT * from bookdb where bname like '"+ss+"%'";
rs = statement.executeQuery(QueryString);
%>
<TABLE cellpadding="15" border="1" style="background-color: #ffffcc;">
<%
while (rs.next()) {
%>
<TR>
<TD><%=rs.getInt(1)%></TD>
<TD><%=rs.getString(2)%></TD>
<TD><%=rs.getString(3)%></TD>
<TD><%=rs.getString(4)%></TD>
<TD><%=rs.getString(5)%></TD>
</TR>
<% } %>
<%
// close all the connections.
rs.close();
statement.close();
connection.close();
} catch (Exception ex) {
%>
</font>
<font size="+3" color="red"></b>
<%
out.println(ex);
}
%>
</TABLE><TABLE>
<TR>
<TD><FORM ACTION="index.html" method="get" >
<button type="submit"><--back</button></TD>
</TR>
</TABLE>
</font>
</body>
</html>
Output:
Result:
Thus the books catalogue are dynamically loaded from the database and
executed using servlets successfully.
Ex.No:8 RETRIEVING USER INFORMATION FROM
Date: XML DOCUMENT

Aim:
To create and save an XML document at the server, which contain ten
users information. To 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:
 Save Students information in the XML file on the specific location.
 Create and establish the connection between html file and XML file.
 Get the user ID as input
 Display the student’s information.

StudentDetails.xml :
<?xml version="1.0" encoding="UTF-8"?>
<Student>
<PersonDetails>
<id>101</id>
<name>Anand</name>
<city>Madurai</city>
<Branch>CSE</Branch>
<Year>I</Year>
</PersonDetails>
<PersonDetails>
<id>102</id>
<name>Anu</name>
<city>Konam</city>
<Branch>CSE</Branch>
<Year>II</Year>
</PersonDetails>
<PersonDetails>
<id>103</id>
<name>Archana</name>
<city>Madurai</city>
<Branch>CSE</Branch>
<Year>I</Year>
</PersonDetails>
<PersonDetails>
<id>104</id>
<name>Monica</name>
<city>Nellai</city>
<Branch>CSE</Branch>
<Year>III</Year>
</PersonDetails>
</Student>

LogIn.html :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
function Display()
{
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.open("GET","UserInfo.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("PersonDetails");
var key_id=document.getElementById("key").value;
for(i=0;i<x.length;i++)
{

if(key_id.match(x[i].getElementsByTagName("id")[0].childNodes[0].nodeValu
e))
j=i;
}
document.write("<h3>User Details are...</h3> <hr> Registeration ID=");

document.write(x[j].getElementsByTagName("id")[0].childNodes[0].nodeValu
e);
document.write("</br> Name=");

document.write(x[j].getElementsByTagName("name")[0].childNodes[0].nodeV
alue);
document.write("</br> City=");
document.write(x[j].getElementsByTagName("city")[0].childNodes[0].nodeVal
ue);
document.write("</br> Branch=");

document.write(x[j].getElementsByTagName("Branch")[0].childNodes[0].node
Value);
document.write("</br> Year=");

document.write(x[j].getElementsByTagName("Year")[0].childNodes[0].nodeV
alue);
document.write("</br> ");
}
</script>
<form name='myform'>
Enter ID:
<input type='text' id='key'/><br/>
<input type='button' value='submit' onclick='Display()'/>
</form>
</body>
</html>

Output:
Result:
Thus the Program takes user id as an input and returns the user details by
taking the user information from the XML document has been executed
successfully.
Ex.No:9(i)
PHP VALIDATION
Date:

Aim:
To validate the form using PHP regular expression

Procedure:
 Create form validation using php tag.
 In that get basic user information using label. Text box and buttons.
 Add regular expression to the button

Program:
index.php:
<!DOCTYPE html>
<!--
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.
-->
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$nameErr = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}

if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
// check if URL address syntax is valid
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-
a-z0-
9+&@#\/%=~_|]/i",$website)) {
$websiteErr = "Invalid URL";
}
}
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>Form Validation using Regular Epression</h2>
<p><span class="error">* required field</span></p>
<form method="post" action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail: <input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website: <input type="text" name="website">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>
</body>
</html>
Output:
Result:
Thus the Validation form using PHP regular expression executed
successfully.
Ex.No:9(ii)
PHP STORES A FORM DATA INTO DATABASE
Date:

Aim:
To php stores a form data into database.

Procedure:
 Create Registration form using php tag.
 In that get basic user information using label. Text box and buttons.
 Add regular expression to the button

Program:
index.php:
<!DOCTYPE html>
<!--
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.
-->
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website =$result= "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$nameErr = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}
if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
// check if URL address syntax is valid
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-
a-z0-
9+&@#\/%=~_|]/i",$website)) {
$websiteErr = "Invalid URL";
}
}
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "iplab";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO register (name, email,website,comments,gender)
VALUES ('$name', '$email', '$website','$comment', '$gender')";
if ($conn->query($sql) === TRUE) {
$result="New Record Inserted Successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>Registration Form</h2>
<p><span class="error">* required field</span></p>
<form method="post" action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail: <input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website: <input type="text" name="website">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
<?php
echo $result;
?>
</body>
</html>
Output:

Result:
Thus the PHP stores a form data into database executed successfully.
Ex.No:10 WEB SERVICES FOR FINDING WHAT PEOPLE
Date: THINK BY ASKING 500 PEOPLE’S OPINION FOR
ANY CONSUMER PRODUCT

Aim:
To Write a web services for finding what people think by asking 500
people’s opinion for any consumer product

Procedure:
 Open the home page.
 Enter the login ID and type the comments then submit.
 Retrieve comments with post id
 Display the comments.

Program:
Index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery Ajax Comment System - Demo</title>
<link rel="stylesheet" href="css/style.css">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrap">
<h1> Maggy Noodles Comment System</h1>
<?php
// retrive post
include('config.php');
include ('function.php');
dbConnect();

$query = mysql_query(
'SELECT *
FROM post
WHERE post_id = 1');
$row = mysql_fetch_array($query);
?>
<div class="post">
<h2><?php echo $row['post_title']?></h2>
<p><?php echo $row['post_body']?></p>
</div>

<?php
// retrive comments with post id
$comment_query = mysql_query(
"SELECT *
FROM comment
WHERE post_id = {$row['post_id']}
ORDER BY comment_id DESC
LIMIT 15");
?>

<h2>Comments.....</h2>
<div class="comment-block">
<?php while($comment = mysql_fetch_array($comment_query)):
?>
<div class="comment-item">
<div class="comment-avatar">
<img src="<?php echo
avatar($comment['mail']) ?>" alt="avatar">
</div>
<div class="comment-post">
<h3><?php echo $comment['name'] ?>
<span>said....</span></h3>
<p><?php echo $comment['comment']?></p>
</div>
</div>
<?php endwhile?>
</div>

<h2>Submit new comment</h2>


<!--comment form -->
<form id="form" method="post">
<!-- need to supply post id with hidden fild -->
<input type="hidden" name="postid" value="<?php echo
$row['post_id']?>">
<label>
<span>Name *</span>
<input type="text" name="name" id="comment-
name" placeholder="Your name here...." required>
</label>
<label>
<span>Email *</span>
<input type="email" name="mail" id="comment-
mail" placeholder="Your mail here...." required>
</label>
<label>
<span>Your comment *</span>
<textarea name="comment" id="comment" cols="30"
rows="10" placeholder="Type your comment here...." required></textarea>
</label>
<input type="submit" id="submit" value="Submit
Comment">
</form>
</div>
</body>
</html>

Ajax_Comment.php
<?php
if (isset( $_SERVER['HTTP_X_REQUESTED_WITH'] )):
include('config.php');
include('function.php');
dbConnect();

if (!empty($_POST['name']) AND !empty($_POST['mail']) AND


!empty($_POST['comment']) AND !empty($_POST['postid'])) {
$name = mysql_real_escape_string($_POST['name']);
$mail = mysql_real_escape_string($_POST['mail']);
$comment = mysql_real_escape_string($_POST['comment']);
$postId = mysql_real_escape_string($_POST['postid']);

mysql_query("
INSERT INTO comment
(name, mail, comment, post_id)
VALUES('{$name}', '{$mail}', '{$comment}',
'{$postId}')");
}
?>

<div class="comment-item">
<div class="comment-avatar">
<img src="<?php echo avatar($mail) ?>" alt="avatar">
</div>
<div class="comment-post">
<h3><?php echo $name ?> <span>said....</span></h3>
<p><?php echo $comment?></p>
</div>
</div>

<?php
dbConnect(0);
endif?>

Config.php
<?php
# db configuration
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', 'root');
define('DB_NAME', 'dbname');
?>

Function.php
<?php
/**
* Connect to mysql server
* @param bool
* @use true to connect false to close
*/
function dbConnect($close=true){

if (!$close) {
mysql_close($link);
return true;
}

$link = mysql_connect(DB_HOST, DB_USER, DB_PASS) or die('Could


not connect to MySQL DB ') . mysql_error();
if (!mysql_select_db(DB_NAME, $link))
return false;
}

/**
* gravatar Image
* @see http://en.gravatar.com/site/implement/images/
*/
function avatar($mail, $size = 60){
$url = "http://www.gravatar.com/avatar/";
$url .= md5( strtolower( trim( $mail ) ) );
// $url .= "?d=" . urlencode( $default );
$url .= "&s=" . $size;
return $url;
}
?>

Style.CSS
/* general styling */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body{
font: 12px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
text-transform: inherit;
color: #333;
background: #e7edee;
width: 100%;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2)
}
.wrap{
width: 720px;
margin: 15px auto;
padding: 15px 20px;
background: white;
border: 2px solid #DBDBDB;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
}

a{ text-decoration: none; color: #333}


h1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 2.8em;
text-align: center;
margin: 25px 0;
}
h2{font-size: 1.5em; margin: 8px 0}
h3{
font-size: 1.2em;
margin: 5px 0;
}
h3 span{
font-weight: normal;
font-size: 1em;
}
.item{
clear: both;
margin:0;
padding: 10px;
overflow: hidden;
border-top: 1px solid #DBDBDB;
}
.item:last-child{border-bottom:1px solid #DBDBDB}
.item:hover{background: #f9f9f9}
.post{
padding: 10px 0;
border-bottom: 1px solid #E6E6E6;
}
.comment-block{
margin: 20px 0 20px 20px;
}
.comment-item{
overflow: hidden;
width: 500px;
clear: both;
padding: 10px;
border: 1px solid #E6E6E6;
border-radius: 5px;
margin: 5px;
}
.comment-avatar{
width: 60px;
float: left;
}
.comment-avatar img{
width: 60px;
height: 60px;
border-radius: 5px;
}
.comment-post{
width: 400px;
float: left;
padding: 0 5px 0 10px;
}
#form{
clear: both;
margin: 10px;
width: 500px;
}

/* form styling */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea {
width:100%;
background: #fff;
border: 1px solid #ddd;
font-size: 13px;
line-height: 20px;
margin: 0;
padding: 7px 10px;
box-shadow: inset 0 1px 2px #eee;
border:1px solid #CCC;
margin:0 0 5px;
border-radius:5px;
}

textarea {
height:100px;
max-width:100%;
}
input[type="submit"] {
cursor:pointer;
width:100%;
border:none;
background:#991D57;
background-image:linear-gradient(bottom, #8C1C50 0%, #991D57 52%);
background-image:-moz-linear-gradient(bottom, #8C1C50 0%, #991D57
52%);
background-image:-webkit-linear-gradient(bottom, #8C1C50 0%,
#991D57 52%);
color:#FFF;
margin:0 0 5px;
padding:10px;
border-radius:5px;
}
input[type="submit"]:hover {
background-image:linear-gradient(bottom, #9C215A 0%, #A82767
52%);
background-image:-moz-linear-gradient(bottom, #9C215A 0%, #A82767
52%);
background-image:-webkit-linear-gradient(bottom, #9C215A 0%,
#A82767 52%);
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
input[type="submit"]:active {
box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}
input:focus,
textarea:focus {
outline:0;
border:1px solid #999;
}
label{
display: block;
margin: 5px 0;
font-weight: 900;
cursor: pointer;
}

.alert{
display: none;
padding: 8px 35px 8px 14px;
margin: 20px 0;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

Script.js
$(document).ready(function(){
var form = $('form');
var submit = $('#submit');

form.on('submit', function(e) {
// prevent default action
e.preventDefault();
// send ajax request
$.ajax({
url: 'ajax_comment.php',
type: 'POST',
cache: false,
data: form.serialize(), //form serizlize data
beforeSend: function(){
// change submit button value text and disabled it
submit.val('Submitting...').attr('disabled', 'disabled');
},
success: function(data){
// Append with fadeIn see
http://stackoverflow.com/a/978731
var item = $(data).hide().fadeIn(800);
$('.comment-block').append(item);

// reset form and button


form.trigger('reset');
submit.val('Submit Comment').removeAttr('disabled');
},
error: function(e){
alert(e);
}
});
});
});

Output:

Result:
Thus a web services for finding what people think by asking 500 people’s
opinion for any consumer product has been executed successfully.

You might also like