Scribd
Upload
6 views

Internet Programming Lab Manual

The document contains a lab record for a student taking an Internet Programming laboratory course. It includes the student's details, course information, and a table of contents for the various exercises completed as part of the course. The exercises covered creating web pages using HTML, CSS, JavaScript form validation, and invoking servlets from HTML forms.

Uploaded by

thabeswar2003
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Internet Programming Lab Manual

The document contains a lab record for a student taking an Internet Programming laboratory course. It includes the student's details, course information, and a table of contents for the various exercises completed as part of the course. The exercises covered creating web pages using HTML, CSS, JavaScript form validation, and invoking servlets from HTML forms.

Uploaded by

thabeswar2003
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 115

UNIVERSITY COLLEGE OF

ENGINEERING - VILLUPURAM
(A Constituent College of Anna University, Chennai)
VILLUPURAM - 605103

DEPARTMENT OF COMPUTER SCIENCE

CS8661 - INTERNET PROGRAMMING


LABORATORY

NAME : …………………………
REG.NO : …………………………
DEPARTMENT : …………………………
YEAR / SEM : …………………………
UNIVERSITY COLLEGE OF ENGINEERING VILLUPURAM
(A CONSTITUENT COLLEGE OF ANNA UNIVERSITY CHENNAI)

VILLUPURAM – 605 103

Department of Computer Science and


Engineering

Bonafide record of work done in the Computer Laboratory of University


College Of Engineering Villupuram for CS8661-Internet Programming
Laboratory during the year 2022-2023 by…………………………………
Reg.No:…………….……................Studying in the sixth Semester B.E.
(Computer Science and Engineering).

Staff In-Charge Head of the Department

Submitted for the practical examination held at University College of Engineering


Villupuram on ………………….

Internal Examiner External Examiner


TABLE OF CONTENTS

Ex.No Date Name of the Exercise Page.No Signature


EX:NO:1 IMAGE MAPS IN HTML

DATE:
PROGRAM :
India.html
<html>
<head>
<title>Image map</title>
</head>
<body>
<map id="picture">
<area href="tamilnadu.html" shape="circle" coords="155,358,30"
alt="tamilnadu"\>
<area href="karnataka.html" shape="circle" coords="115,322,20" alt="karnataka"\>
<area href="andhrapradesh.html" shape="circle" coords="161,300,30"
alt="andhra pradesh"\>
<area href="kerala.html" shape="circle" coords="122,367,30" alt="kerala"\>
</map>
<img src=" india.jpg" alt="India" usemap="#picture"\>
</body>
</html>

Tamilnadu.html

<html>
<head>
<title>About Tamilnadu</title>
</head>
<body>
<center><h1>Tamilnadu</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>
</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,598</li>
</ul>
</body>
</html>

Andhrapradesh.html

<html>
<head>
<title >About Andhrapradesh</title>
</head>
<body>
<center><h1>Andhrapradesh</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>
</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: Trivandrum</li>
<li>Language: Malayalam</li>
<li>Population: 3,18,38,619</li>
</ul>
</body>
</html>
OUTPUT:

Result:
EX:NO:2 WEB PAGES WITH CSS

DATE:
PROGRAM:

newcss.css
h1,h2{
text-decoration: underline;
font-style: italic;
text-align: center;
}
#body{
background-color: tan;
border: red dotted;
text-align: center;
}
.div{
border: peru solid;
}
*{
letter-spacing:1px;
}
a:link{
color: black;
}
a:visited{
color: yellow;
}
a:hover{
color: green;
}
a:active{
color: blue;
}
ul li{
font-size:small;
}
cssfile.html
<html>
<head>
<title>FLOWERS</title>
<!--Extended Style Sheet -->
<link rel="stylesheet" type="text/css" href="newcss.css">
<!--Embed Style sheet-->
<style type="text/css">
p{
background-color: lightgrey;
text-align: justify;
margin: 2em 7em;
}
</style>
</head>
<body id="body">
<h1>FLOWER</h1>
<p>
<span style="font: 200 x-large fantasy">Flower</span>
sometimes known as a bloom or blossom, is the
reproductive structure found in flowering plants.
The flower is God's finest workmanship in the
world. It is his finest gift to the mankind.We have
seen the flowers of many kinds and to many colors.
In India we see the flowers like
</p>
<!--Inline Style Sheet-->
<table style="background-position: center; text-align: center; padding: 3px;">
<tr>
<td align="left">
<div class="div">
<ul>
<li><a href="">Lily</a></li>
<li><a href="">Lotus</a></li>
<li><a href="">Rose</a></li>
<li><a href="">Jasmine</a></li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>

OUTPUT:

Result:
EX:NO:3 HTML FORM VALIDATION USING JAVA SCRIPT

DATE:
PROGRAM:
Main.html:

<html>

<head>
<title> ONLINE BOOK STORES</title>
</head>

<body bgcolor="pink">

<marquee>
<h1 align=”center”>
<b><u><font color="white">ONLINE BOOK STORAGE</u></font> </b>
</h1>

</marquee>

<h2 align="center">
<b>

<p><u><font color="purple">Welcome to online book storage. Press login if


you are having id otherwise press registration.</u></font></p>
</b>

</h2>

<h2> <font color="white"></font></h2>

<h3 align="center">

<a href="reg.html"><br><br><font color="black"><i>

REGISTRATION FORM</font></i><br><br>

<a href="profile.html"><font color="black"><i>USER


PROFILE</font></i><br><br>
<a href="login.html"><font color="black"><i>USER
LOGIN</font></i><br><br>

<a href="catalog.html"><font color="black"><i>BOOKS


CATALOG</font></i><br><br>

<a href="payment.html"><font
color="black"><i>PAYMENT</font></i><br><br>

<a href="Order.html"><font color="black"><i>ORDER


CONFIRMATION</h3></font></i><br>

</body>
</html>

Login.html:
<html>
<body bgcolor=”blue”>
<br><br><br>

<script language=”javascript”>

function validate(){

var flag=1;

if(document.myform.id.value = =""||document.myform.pwd.value = =""){


alert("LoginId and Password must be filled")

flag=0;

}
if(flag = =1){

alert(“VALID INPUT”);

window.open("catalog.html","right");
}else{
alert(“INVALID INPUT”);

//document.myform.focus();

}
}

</script>
<form name=”myform”>

<div align=”center”>

<pre>
LOGIN ID: <input type=”text” name=”id”><br>

PASSWORD: <input type=”password” name=”pwd”> <br><br>


</pre>

<input type=”button” value=”ok” onClick=”validate()”>

<input type=”reset” value=”clear”>


</div>
</form>

</body>
</html>

Reg.html:

<html>

<body bgcolor=”blue”>

<br><br>
<script language=”javascript”>
Function validate(){
var str = document.myform.phno.value;

var x;

if(flag= =1){
alert("VALID INPUT");

}else
{

alert("INVALID INPUT");

document.myform.focus();
}

}
</script>

<form name="myform">

<div align="center">
<pre>
NAME :<input type="text" name = "name"><br>

ADDRESS :<input type = "type" name="addr"><br>


CONTACT NUMBER:<input type="text" name="phno"><br>

LOGINID :<input type="text" name="id"><br>

PASSWORD :<input type="password" name="pwd"></pre><br><br>

</div>

<br><br>
<div align="center">
<input type="submit" value="ok" onClick="validate()">&nbsp;&nbsp;&nbsp;
<input type="reset" value="clear">

</div>

</form>
</body>

</html>
Catalog.html:

<html>

<body bgcolor="pink">
<br><br><br>

<div align="center">
<pre>

BOOK TITLE:<input type="text" name="title"><br>

</pre>
<br><br>
</div>

<br><br>
<div align="center">

<input type="submit" value="ok" name="button1">

<input type="reset" value="clear" name="button2">

</div>

</body>
</html>
Order.html:

<html>
<body bgcolor="pink">

<br><br><br>
<div align="center">

<pre>

LOGIN ID : <input type="text" name="id"><br>


TITLE : <input type="text" name="title"><br>

NO.OF BOOKS : <input type="text" name="no"><br>


COST OF BOOK: <input type="text" name="cost"><br>

DATE :<input type="text" name="date"><br>

</pre>
<br><br>
</div>

<br><br>
<div align="center">

<input type="submit" value="ok" name="button1">

<input type="reset" value="clear" name="button2">

</div>

</body>
</html>
Payment.html:

<html>
<body bgcolor="pink">

<br><br><br>
<script language="javascript">

function validate(){

var flag=1;
if(

document.myform.id.value = ="" ||
document.myform.pwd.value = ="" ||

document.myform.amount.value = ="" ||

document.myform.num.value = =""
){
flag=0;

}
var str=document.myform.amount.value;

var x;

for(var i=0; i<str.length; i++){

x=str.substr(i,1);

if(!(x<=9)){
flag=0;
break;
}

str=document.myform.num.value;
for(var i=0; i<str.lenght ;i++){

x=str.substr(i,1);
if(!(x<=9)){

flag=0;

break;
}

}
if(flag = =1){

alert("VALID INPUT");

}else{
alert("INVALID INPUT");
document.myform.focus();

}
}

</script>

<form name="myform">

<div align="center">

<pre>
LOGIN ID :<input type="text" name="id"><br>
PASSWORD :<input type="password" name="pwd"><br>
AMOUNT :<input type="text" name="amount"><br>

CREDIT CARD NUMBER: <input type="password" name="num+"><br>

</pre>
<br><br>

</div>
<br><br>

<div align="center">

<input type="submit" value="ok" onClick="validate()">


<input type="reset" value="clear">

</div>
</form>

</body>

</html>
Profile.html:
<html>

<body bgcolor="pink">
<br><br><br>

<script type="text/javascript">

function validate(){

var flag=1;

if(document.myform.id.value = ="" || document.myform.pwd.value = ="" ){


flag=0;
}
if(flag==1){

alert("VALID INPUT");

}else{
alert("INVALID INPUT");

document.myform.focus();
}

</script>
<form name="myform">

<div align="center">
<pre>

LOGIN ID :<input type="text" name="id"><br>

PASSWORD:<input type="password" name="pwd">


</pre>
<br><br>

</div>
<br><br>

<div align="center">

<input type="submit" value="ok" onClick="validate()">

<input type="reset" value="clear" >

</div>
</form>
</body> </html>
OUTPUT :
Result:
EX:NO:4a INVOKING SERVLETS FROM HTML FORMS

DATE:

0
PROGRAM

Form.html

<html>
<head>
<title>Student Information Form</title>
</head>
<body>
<center>
<form name="form1"
action="http://localhost:8080/examples/servlet/my_servletDemo">
<h3>Enter student information in following fields -</h3>
<table>
<tr>
<td><b>Roll Number</b></td>
<td><input type="text" name="Roll Number" size="25" value=" "></td>
</tr>

<tr>
<td><b>Student Name</b></td>
<td><input type="text" name="Student Name" size="25" value=" "></td>
</tr>

<tr>
<td><b>Student Address</b></td>
<td><input type="text" name="Address" size="50" value=" "></td>
</tr>

<tr>
<td><b>Phone</td>
<td><input type="text" name="Phone" size="25" value=" "></td>
</tr>

<tr>
<td><b>Total Marks</td>
<td><input type="text" name="Total Marks" size="10" value=" "></td>
</tr>
</table>
<input type="submit" value="submit">
</form>
</center>
</body>
</html>

my_servletDemo .java

import java.io.*;
import java.util.*;
import javax.servlet.*;
public class my_servletDemo extends GenericServlet
{
public void service(ServletRequest req , ServletResponse res)
throws ServletException , IOException
{
PrintWriter out=res.getWriter();
Enumeration en=req.getParameterNames();
while(en.hasMoreElements())
{
String name_received=(String)en.nextElement();
out.print(name_received+ " = ");
String value_received = req.getParameter(name_received);
out.println(value_received);
out.println(" ");
}
out.close();
}
}

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> my_servletDemo </servlet-name>
<servlet-class> my_servletDemo </servlet-class>
</servlet>
<servlet-mapping>
<servlet-name> my_servletDemo </servlet-name>
<url-pattern>/ my_servletDemo </url-pattern>
</servlet-mapping>
</web-app>

Steps for execution:

✓ Normally Tomcat will be in installed in the following directory C:\Program


Files\Apache Software Foundation\webapps
✓ Create a folder inside the following directory C:\Program Files\Apache
Software Foundation\webapps ( Say folder name is program )
✓ Create a folder WEB-INF inside program folder
✓ Create a folder classes inside WEB-INF folder
✓ Place the java and html files inside program folder
✓ Place the web.xml file inside WEB-INF folder
✓ Compile the java file and place the corresponding class file inside the classes
folder
✓ Open Internet Explorer
✓ Type localhost:8080 in address bar, You will see the Tomcat server Home
page.
✓ To see the output of the above program, Type
localhost:8080\program\form.html in the address bar.
✓ An html form will be displayed. Feed the data in the html form and press
submit It will lead to another webpage which contain the details fed in the first
page.
OUTPUT :

Result:
EX:NO:4b SESSION TRACKING USING HIDDEN FORM FIELDS(cookies)

DATE:
Program:

register.html:

<html>

<body bgcolor = "cyan">

<center>
<h1>WELCOME TO REGISTRATION PAGE</h1>

<form action="./registerone" METHOD="post">

Name: <input type="text" name = "name"><br><br>

Password: <input type="password" name="password"><br><br>


PROFESSION:

<select name="profession">

<option value="engineer">ENGINEER</option>

<option value="teacher">TEACHER</option>

<option value="businessman">BUSINESSMAN</option>
</select><br><br>

<input type="submit" value="REGISTER">

</form>

</center>

</body>

</html>
web.xml:

<web-app version="2.4"

xmlns="http://java.sun.com/xml/ns/j2ee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee

http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<welcome-file-list>

<welcome-file>register.html</welcome-file>
</welcome-file-list>

<servlet>

<servlet-name>RegistrationServletOne</servlet-name>

<servlet-class>RegistrationServletOne</servlet-class>

</servlet>
<servlet-mapping>

<servlet-name>RegistrationServletOne</servlet-name>

<url-pattern>/registerone</url-pattern>

</servlet-mapping>

<servlet>

<servlet-name>RegistrationServletTwo</servlet-name>

<servlet-class>RegistrationServletTwo</servlet-class>

</servlet>

<servlet-mapping>
<servlet-name>RegistrationServletTwo</servlet-name>

<url-pattern>/registertwo</url-pattern>

</servlet-mapping>

</web-app>

RegistrationServletOne.java:
import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class RegistrationServletOne extends HttpServlet

public void doPost(HttpServletRequest request, HttpServletResponse response)


throws ServletException, IOException

String name = request.getParameter("name");

String password = request.getParameter("password");

String profession = request.getParameter("profession");

response.setContentType("text/html");

PrintWriter out = response.getWriter();

out.println("<html><body bgcolor = wheat>");

out.println("<center>");
out.println("<h1>COMPLETE THE REGISTRATION</h1>");

out.println("<form action = ./registertwo method = post");

out.println("<input type = hidden name = name value =" + name + ">");

out.println("<input type = hidden name = password value =" + password + ">");

out.println("<input type = hidden name = profession value =" + profession + ">");


out.println("EMAIL ID:<input type =text name = email><br><br>");

out.println("PHONE NO:<input type =text name = cell><br><br>");

out.println("<input type =submit value=registernow>");

out.println("</center>");
out.println("</body></html>");

out.close();

}}

RegistrationServletTwo.java:

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class RegistrationServletTwo extends HttpServlet

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException


{

String name = request.getParameter("name");

String password = request.getParameter("password");

String profession = request.getParameter("profession");

String email = request.getParameter("email");


String cell = request.getParameter("cell");

response.setContentType("text/html");

PrintWriter out = response.getWriter();

out.println("<html><body bgcolor = wheat>");


out.println("<center>");

out.println("<h1>REGISTRATION SUCCESSFUL..........</h1>");

out.println("</center>");

out.println("</body></html>");

out.close();
}

Steps for execution:

✓ Normally Tomcat will be in installed in the following directory C:\Program


Files\Apache Software Foundation\webapps
✓ Create a folder inside the following directory C:\Program Files\Apache
Software Foundation\webapps ( Say folder name is session )
✓ Create a folder WEB-INF inside program folder
✓ Create a folder classes inside WEB-INF folder
✓ Place the java and html file inside program folder
✓ Place the xml file inside WEB-INF folder
✓ Compile the java file and place the corresponding class file inside the classes
folder
✓ Open Internet Explorer
✓ Type localhost:8080 in address bar, You will see the Tomcat server Home
page.
To see the output of the above program, Type localhost:8080\session\GUI.html in the
address bar

OUTPUT:
Result:
EX:NO:4c SESSION TRACKING FOR HIT COUNT

DATE:
Program:
PageHitCounter.java:
import java.io.*;

import java.sql.Date;

import java.util.*;

import javax.servlet.*;

import javax.servlet.http.*;
public class PageHitCounter extends HttpServlet {

private int hitCount;

public void init() {


// Reset hit counter.
hitCount = 0;

}
public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

// Set response content type

response.setContentType("text/html");
// This method executes whenever the servlet is hit

// increment hitCount

hitCount++;
PrintWriter out = response.getWriter();

String title = "Total Number of Hits";


String docType = "<!doctype html public \"-//w3c//dtd html 4.0 " +
"transitional//en\">\n";

out.println(docType + "<html>\n" + "<head><title>" + title + "</title></head>\n" +


"<body bgcolor = \"#f0f0f0\">\n" + "<h1 align = \"center\">" + title + "</h1>\n" +
"<h2 align = \"center\">" + hitCount + "</h2>\n" +

"</body> </html>");

public void destroy() {

// This is optional step but if you like you


// can write hitCount value in your database.

}
}

web.xml:

<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<servlet>
<servlet-name>PageHitCounter</servlet-name>
<servlet-class>PageHitCounter</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>PageHitCounter</servlet-name>
<url-pattern>/PageHitCounter</url-pattern>
</servlet-mapping>
</web-app>
OUTPUT:

Steps for execution:

✓ Create a servlet(i.e)PageHitCounter.java
✓ Compile the servlet by using the following command javac
PageHitCounter.java
✓ The class file will generated, copy this class file to the location C: \Program
Files\Apache Software Foundation\webapps\WEB-INF\classes
✓ Edit the web.xml file present at WEB-INF folder
✓ Open the web browser and give the URL for PageHitCounter.java

Result:
EX:NO:5 ONLINE EXAMINATION RESULTS USING SERVLET

DATE:
PROGRAM :
onlineexam.html

<html>
<head><title>Online Examination</title>
<script language="javascript">
function validation(Form_obj) {
if(Form_obj.Seat_no.value.length= =0){
alert("Please,fill up the Seat Number");
Form_obj.Seat_no.focus();
return false;
}
if(Form_obj.Name.value.length= =0){
alert("Please,fill up the Name");
Form_obj.Name.focus();
return false;
}
return
true;
}
</script>
</head>
<body bgcolor="lightgreen">
<center>
<h1>OnLine Examination</h1>
</center>
<form action="StudentServlet3" method="post" name="entry"
onSubmit="return validation(this)">
<input type="hidden" value="list" name="action">
<table>
<tr>
<td><h3>Seat Number:</h3></td>
<td><input type="text" name="Seat_no"></td>
</tr>
<tr>
<td><h3>Name:</h3></td>
<td><input type="text" name="Name" size="50"></td>
</tr>
<hr/>
<tr>
<td><b>Total Marks:10(Each question carries equal marks) </b></td>
<td></td>
<td></td>
<td></td>
<td><b>Time: 15 Min.</b></td>
</tr>
</table>
<hr/>
<b>1. Apache is an open source web server</b><br/>
<input type="radio" name="group1" value="True">True
<input type="radio" name="group1" value="False">False<br> <br>

<b>2. In Modern PC there is no cache memory.</b><br/>


<input type="radio" name="group2" value="True">True
<input type="radio" name="group2" value="False">False<br> <br>

<b>3. Tim-Berner Lee is the originator of Java.</b><br/>


<input type="radio" name="group3" value="True">True
<input type="radio" name="group3" value="False">False<br><br>

<b>4.JPG is not a video file extension.</b><br/>


<input type="radio" name="group4" value="True">True
<input type="radio" name="group4" value="False">False<br><br>

<b>5. HTTP is a stateful protocol</b><br/>


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

<center>
<input type = "submit" value="Submit">
<input type = "reset" value="Clear"><br><br>
</center>
</form>
</body>
</html>

StudentServlet3.java

import java.sql.*;
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class StudentServlet3 extends HttpServlet {


String SeatNum, Name;
String ans1, ans2, ans3, ans4, ans5;
int a1=0, a2=0, a3=0, a4=0, a5=0;

Connection connect=null;
Statement stmt=null;
ResultSet rs=null;
public void doPost (HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException{
//Establishing Connection to the Database try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String url = "jdbc:odbc:StudentDB1";
connect = DriverManager.getConnection(url, " ", " ");
} catch(ClassNotFoundException e){
e.printStackTrace();
} catch(SQLException e){
e.printStackTrace();}
catch(Exception e){
e.printStackTrace();
}

//Gathering parameters from HTML form


SeatNum = request.getParameter("Seat_no");
Name = request.getParameter("Name");
ans1 =request.getParameter("group1");
if(ans1.equals("True"))
a1=2;
else
a1=0;
ans2 = request.getParameter("group2");
if(ans2.equals("True"))
a2=0;
else
a2=2;
ans3 = request.getParameter("group3");
if(ans3.equals("True"))
a3=0;
else
a3=2;
ans4 = request.getParameter("group4");
if(ans4.equals("True"))
a4=2;
else
a4=0;
ans5 = request.getParameter("group5");
if(ans5.equals("True"))
a5=0;
else
a5=2;
int Total=a1+a2+a3+a4+a5;

//inserting values in the database


try {
stmt = connect.createStatement();
String query = "INSERT INTO StudentTable (" + "Seat_no,Name,Marks" + ")
VALUES ('" +SeatNum + "', '" + Name + "', '"+Total+ "')";
int result = stmt.executeUpdate(query);
stmt.close();
}catch(SQLException e) {
}
//retrieving the records from database

response.setContentType("text/html");
PrintWriter out=response.getWriter();
out.println("<html>");
out.println("<head>");
out.println("</head>");
out.println("<body bgcolor=pink>");
out.println("<center>");
out.println("<br><br>");
out.println("<h2>Students Database</h2>");
out.println("<table border=5>");
try
{
stmt = connect.createStatement();
String query = "SELECT * FROM StudentTable WHERE
Name="+"'"+Name+"'"; 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.println(" <td>"+ rs.getInt(1) + "</td>");
out.println(" <td> "+ rs.getString(2) +" </td>");
out.println(" <td> "+rs.getString(3) +" </td>");
out.println(" </tr>");
}
out.println("</table>");
}catch(SQLException e){}

finally {

try {
if(rs!=null)
rs.close();
if(stmt!=null)
stmt.close();
if(connect!=null)
connect.close();
}catch(SQLException
e){out.println("<h1>Thanks</h1>\n");
out.println("</table>");
out.println("</center>");
out.println("</body></html>");
}
}
}
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> StudentServlet3</servlet-name>
<servlet-class>StudentServlet3</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>StudentServlet3</servlet-name>
<url-pattern>/StudentServlet3</url-pattern>
</servlet-mapping>
</web-app>

Steps for execution:

✓ Normally Tomcat will be in installed in the following directory C:\Program


Files\Apache Software Foundation\webapps
✓ Create a folder inside the following directory C:\Program Files\Apache
Software Foundation\webapps ( Say folder name is database )
✓ Create a folder WEB-INF inside program folder
✓ Create a folder classes inside WEB-INF folder
✓ Place the java and html file inside program folder
✓ Place the xml file inside WEB-INF folder
✓ Compile the java file and place the corresponding class file inside the classes
folder
✓ Open Internet Explorer
✓ Type localhost:8080 in address bar, You will see the Tomcat server Home
page.
✓ To see the output of the above program, Type
localhost:8080\database\JDBCHTML1.html in the address bar.

Steps to compile java file:

✓ The file for compiling servlet program is available in the directory


C:\Program Files\Apache Software Foundation\lib and the file name is
servlet-api.jar
✓ Use the following line to compile the java file of the above program
✓ javac –classpath “C:\Program Files\Apache Software Foundation\lib\servlet-
api.jar” StudentServlet3.java

Steps for database connectivity:

✓ Create an ms-access file StudentDB1


✓ Create an table “StudentTable” in that access file with the following fields
seatnum, name, total
✓ Connect the ms-access file with the program using ODBC connectivity in
control panel
OUTPUT :
Result:
EX:NO:6 ONLINE EXAMINATION USING JSP WITH DATABASE CONNECTIVITY

DATE:
Program:
Exam.jsp
<%@ page language="java" import="java.sql.*" %>

<%@ page import="java.io.*" %>

<%@ page import="java.util.*" %>

<%

String SeatNum, Name;


String ans1, ans2, ans3, ans4, ans5;

int a1, a2, a3 ,a4 ,a5;

a1= a2 = a3 = a4 = a5=0;
Connection connect=null;
Statement stmt=null;

ResultSet rs=null;
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

String url = "jdbc:odbc:StudentDB1";

connect = DriverManager.getConnection(url, " ", " ");

if(request.getParameter("action") != null){
SeatNum = request.getParameter("Seat_no");

Name = request.getParameter("Name");

ans1 =request.getParameter("group1");
if(ans1.equals("True"))

a1=2;
else
a1=0;

ans2 = request.getParameter("group2");

if(ans2.equals("True"))
a2=0;

else
a2=2;

ans3 = request.getParameter("group3");

if(ans3.equals("True"))
a3=0;

else
a3=2;

ans4 = request.getParameter("group4");

if(ans4.equals("True"))
a4=2;
else

a4=0;
ans5 = request.getParameter("group5");

if(ans5.equals("True"))

a5=0;

else

a5=2;
int Total=a1+a2+a3+a4+a5;
stmt = connect.createStatement();

String query = "INSERT INTO StudentTable (Seat_no,Name,Marks)

VALUES (' " +SeatNum + " ', ' " + Name + " ', ' "+Total+ " ')";
int result = stmt.executeUpdate(query);

stmt.close();
stmt = connect.createStatement();

query = "SELECT * FROM StudentTable WHERE

Name="+"'"+Name+" ' ";


rs = stmt.executeQuery(query);

%>
<html><head><title>Student Mark List</title>

</head>

<body bgcolor="khaki">
<center>
<h2>Students Marksheet</h2>

<h3>Name of the College:ABC College of Engineering</h3>


<table border="1" cellspacing="0" cellpadding="0">

<tr>

<td><b>Seat_No</b></td>

<td><b>Name</b></td>

<td><b>Marks</b></td>
</tr>
<%while(rs.next() { %>
<tr>

<td><%=rs.getInt(1)%></td>

<td> <%=rs.getString(2)%></td>
<td> <%=rs.getString(3)%></td>

</tr>
<% }

rs.close();

stmt.close();
connect.close();

%>
</table>

</center>

<br/> <br/><br/>
<table>
<tr><td><b>Date:<%=new java.util.Date().toString()

%></td></tr>
<tr><td><b>Signature: X.Y.Z. <b></td></tr>

</table>

<div>

<a href="http://localhost:8080/jspconnectivity/Exam.jsp">Click

here to go back</a>
</div>
</body>
</html>

<%} else { %>

<html>
<head><title>Online Examination</title>

<script language="javascript">
function validation(Form_obj) {

if(Form_obj.Seat_no.value.length = =0){

alert("Please,fill up the Seat Number");


Form_obj.Seat_no.focus();

return false;
}

if(Form_obj.Name.value.length= =0){

alert("Please,fill up the Name");


Form_obj.Name.focus();
return false;

}
return true;

</script>

</head>

<body bgcolor="lightgreen" >


<center>
<h1>OnLine Examination</h1>
</center>

<form action="http://localhost:8080/jspconnectivity/Exam.jsp"

method="post"
name="entry" onSubmit="return validation(this)">

<input type="hidden" value="list" name="action">


<table>

<tr>

<td><h3>Seat Number:</h3></td>
<td><input type="text" name="Seat_no"></td>

</tr>
<tr>

<td><h3>Name:</h3></td>

<td><input type="text" name="Name" size="50"></td>


</tr>
<hr/>

<tr>
<td><b>Total Marks:10(Each question carries equal marks)

</b></td>

<td></td>

<td></td>

<td></td>
<td><b>Time: 15 Min.</b></td>
</tr>
</table>

<hr/>

<b>1. Apache is an open source web server</b><br/>


<input type="radio" name="group1" value="True">True

<input type="radio" name="group1"


value="False">False<br>

<br/>

<b>2. In Modern PC there is no cache memory.</b><br/>

<input type="radio" name="group2" value="True">True


<input type="radio" name="group2"

value="False">False<br>

<br/>

<b>3. Tim-Berner Lee is the originator of Java.</b><br/>

<input type="radio" name="group3" value="True">True


<input type="radio" name="group3"

value="False">False<br>

<br/>

<b>4.JPG is not a video file extension.</b><br/>


<input type="radio" name="group4" value="True">True
<input type="radio" name="group4 value="False">False<br>
<br/>

<b>5. HTTP is a statefull protocol</b><br/>

<input type="radio" name="group5" value="True">True


<input type="radio" name="group5"

value="False">False<br>
<hr/>

<center>
<input type = "submit" value="Submit">

<input type = "reset" value="Clear"><br><br>


</center>

</form>

<%}%>
OUTPUT :
Result:
EX:NO:7 ONLINE BOOKS CATALOGUE

DATE:
Program:
index.jsp:
<%@page contentType="text/html" pageEncoding="UTF-8" %>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 ">


<title>JSP Page</title>
<style>

img:hover{

width:100%;

height:100%;

</style>

</head>
<body>

<h1>Books Catalogue</h1>
<form action="index.jsp">

<select name="category" onchange="display()" id="category"

name="category">

<option value="Maths">Maths</option>

<option value="Novel">English Novels</option>


</select>
</form>

<div id ="s1"></div>

<script>
function display() {

var m = document.getElementById("category").value;

//ajax code starts var xhttp = new

XMLHttpRequest();

xhttp.onreadystatechange=function(){

if(this.readyState==4 && this.status==200)

{
document.getElementById("s1").innerHTML = this.responseText;
}

};

xhttp.open("GET","booklist.jsp?category="+m,true);//url rewriting

xhttp.send();

// ajax code ends


}

</script>

<h1>online catalgoue display</h1>


</body> </html>

booklist.jsp:

<%@page import = "java.sql.*" contentType="text/html"

pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>JSP Page</title>
<style>

.box {

display: flex;

align-items: center;

justify-content: center;

.box div {

width: 100%;

height: 100%;

.price {

color: grey;

font-size: 25px;

img{

width:20%;

}
</style>
</head>

<body>

<%
String category = request.getParameter("category");

Class.forName("org.apache.derby.jdbc.ClientDriver");
Connection con=

DriverManager.getConnection("jdbc:derby://localhost:1527/shopping");

Statement st = con.createStatement();
String query="select bookid,author,price from catalogue where

category='"+category+"'";
ResultSet rs = st.executeQuery(query);
%>

<h1>List of Books</h1>
<div class="box">

<%

while(rs.next())
{%>

<div>

<img src="<%=rs.getString(1)%>.jpg"/>

<p>Author:<%=rs.getString(2)%></p>
<p class="price">Rs.<%=rs.getString(3)%></p>

</div> <%

}
con.close();

%>

</div>
</body>

</html>

Output:
Result:
EX:NO:8 EXTRACTING INFORMATION FROM THE XML

DATE:
Program:
UserInfo.xml

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


<userlist>
<userid>usr01</userid>
<username>indhu</username>
<address>trichy</address>
<phone>9000000078</phone>
<email>[email protected]</email>
<userid>usr02</userid>
<username>Pooja</username>
<address>chennai</address>
<phone>9111111111</phone>
<email>[email protected]</email>
<userid>usr03</userid>
<username>sadhana</username>
<address>telugana</address>
<phone>9222222222</phone>
<email>[email protected]</email>
<userid>usr04</userid>
<username>sameera</username>
<address>bangalore</address>
<phone>9555555555</phone>
<email>[email protected]</email>
<userid>usr05</userid>
<username>naveena</username>
<address>Perambalur</address>
<phone>9666666666</phone>
<email>[email protected]</email>
</userlist>
index.html

<!DOCTYPE html>
<html>
<head>
<title>Searching for XML Elements </title>
<script>
function readXMLData()
{
var xmlDocumentObject, id , name , addr, phone, email;
xmlDocumentObject=new XMLHttpRequest();
xmlDocumentObject.open("GET","userlist.xml",false);
xmlDocumentObject.send();
xmlDocumentObject=xmlDocumentObject.responseXML;
id = xmlDocumentObject.getElementsByTagName("userid");
name = xmlDocumentObject.getElementsByTagName("username");
address = xmlDocumentObject.getElementsByTagName("address");
phone = xmlDocumentObject.getElementsByTagName("phone");
email = xmlDocumentObject.getElementsByTagName("email");
for (i = 0; i < id.length; i++)
{
output=id[i].firstChild.nodeValue;
if (output == document.getElementById("myText").value)
{
displayDIV.innerHTML = id[i].firstChild.nodeValue + "<br> " +
name[i].firstChild.nodeValue + "<br> " +
address[i].firstChild.nodeValue + "<br> " +
phone[i].firstChild.nodeValue + "<br>" +
email[i].firstChild.nodeValue;
}
}
}
</script>
</head>
<body>
<h1>Search User</h1>
<input type="text" id="myText" value="">
<input type="button" value="Get User Details" onclick="readXMLData()">
<p>
<div id="displayDIV"> </div>
</body>
</html>

Output:

Result:
EX:NO:9a FORM VALIDATION USING PHP REGULAR EXPRESSION

DATE:
Program:
index.php:
<!DOCTYPE HTML>

<html>

<head>

<style>

.error {
color: #FF0000;
}

</style>
</head>
<body>

<?php
$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"]);

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"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {

$emailErr = "Invalid email format";

}
}

if (empty($_POST["website"])) {
$website = "";

} else {

$website = test_input($_POST["website"]);

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>PHP Form Validation Example</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" value="<?php echo $name;?>">

<span class="error">* <?php echo $nameErr;?></span>

<br><br>

E-mail: <input type="text" name="email" value="<?php echo $email;?>">


<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website: <input type="text" name="website" value="<?php echo
$website;?>">

<span class="error"><?php echo $websiteErr;?></span>


<br><br>
Comment: <textarea name="comment" rows="5" cols="40"><?php echo

$comment;?></textarea>

<br><br>

Gender:
<input type="radio" name="gender" <?php if (isset($gender) &&
$gender=="female") echo "checked";?> value="female">Female

<input type="radio" name="gender" <?php if (isset($gender) &&


$gender=="male")
echo "checked";?> value="male">Male

<input type="radio" name="gender" <?php if (isset($gender) &&


$gender=="other")
echo "checked";?> value="other">Other

<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:
EX:NO:9b STORING A FORM DATA IN PHP

DATE:
A
Program:
index.php
<!DOCTYPE html>
<html>
<head>
<style>
.error {
color: #FF0000;
}
</style>
</head>
<body>
<?php
$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"]);
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"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}}
if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
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";
$conn = new mysqli($servername, $username, $password, $dbname);
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:
EX:NO:10 WEB SERVICE FOR FINDING PEOPLE’S OPINION

DATE:
Aim:
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:

You might also like