Engineering Buzz: Web Technology

Showing posts with label Web Technology. Show all posts

Thursday, 25 April 2013

Web Technology - HTML progrm using AJAX and Java

SOURCE CODE:

Index.jsp:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

<title>JSP and Servlet using AJAX</title>

<script type="text/javascript">

function getXMLObject() //XML OBJECT

{

var xmlHttp = false;

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") // For Old Microsoft

Browsers

}

catch (e) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") // For Microsoft IE 6.0+

}

catch (e2) {

xmlHttp = false // No Browser accepts the XMLHTTP Object then false

}}

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {

xmlHttp = new XMLHttpRequest();

//For Mozilla, Opera Browsers

}

return xmlHttp; // Mandatory Statement returning the ajax object created

}

var xmlhttp = new getXMLObject(); //xmlhttp holds the ajax object

function ajaxFunction() {

var getdate = new Date(); //Used to prevent caching during ajax call

if(xmlhttp) {

xmlhttp.open("GET","gettime?" + getdate.getTime(),true); //gettime will be the servlet

name

xmlhttp.onreadystatechange = handleServerResponse;

xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xmlhttp.send(null);

}}

function handleServerResponse() {

if (xmlhttp.readyState == 4) {

if(xmlhttp.status == 200) {

document.myForm.time.value=xmlhttp.responseText; //Update the HTML Form

element

}

else {

alert("Error during AJAX call. Please try again");

}}}

</script>

<body>

<form action="" name="myForm">

Server Time:<input type="text" name="time" />

<br />

<input type="button" onClick="javascript:ajaxFunction();" value="Click to display

Server Time on Textbox"/>

<br />

</form></body>

</head></html>

Gettime.java:

import java.io.IOException;

import java.io.PrintWriter;

import java.util.Date;

import javax.servlet.ServletConfig;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet(name="gettime", urlPatterns={"/gettime"})

public class gettime extends HttpServlet {

protected void processRequest(HttpServletRequest request, HttpServletResponse

response)

throws ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");

PrintWriter out = response.getWriter();

try {

out.println("<html>");

out.println("<head>");

out.println("<title>Servlet gettime</title>");

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

out.println("<body>");

out.println("<h1>Servlet gettime at " + request.getContextPath () + "</h1>");

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

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

} finally {

out.close();

}}

@Override

public void init(ServletConfig config) throws ServletException {

super.init(config);

}

@Override

public void destroy() {

}

@Override

public void doPost(HttpServletRequest request,HttpServletResponse response)

throws IOException, ServletException {

PrintWriter out = response.getWriter();

Date df = new Date();

out.println(df.getTime());

}

@Override

public void doGet(HttpServletRequest request,HttpServletResponse response)

throws IOException, ServletException {

doPost(request,response);

}

}

Wednesday, 24 April 2013

Web Technology - XML and XSTL - how to run xml - XML stylesheet

XSL FILE

<html>

<body>

    <h2 style="color:darkorange" > Students database</h2>

      <table border="2">

        <tr bgcolor="FF6600" style="color:white">

          <th >Name</th>

          <th>Address</th>

          <th>Standards</th>

          <th>marks</th>

        </tr>

        <xsl:for-each select="student/persondetails">

          <tr bgcolor="888888" style="color:white">

            <td>

              <xsl:value-of select="name"/>

            </td>

            <td>

              <xsl:value-of select="address"/>

            </td>

            <td>

              <xsl:value-of select="std"/>

            </td>

            <td>

              <xsl:value-of select="marks"/>

            </td>

          </tr>

        </xsl:for-each>

      </table>

      </body>

</html>

</xsl:template>

</xsl:stylesheet>

XML FILE

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

<?xml-stylesheet type="text/xsl" href="simplexml.xsl"?>

<student>

<persondetails>

<name>Anand</name>

<address>Pune</address>

<std>Second</std>

<marks>100</marks>

</persondetails>

<persondetails>

<name>Anu</name>

<address>chennai</address>

<std>tenth</std>

<marks>100</marks>

</persondetails>

<persondetails>

<name>Priya</name>

<address>mumbai</address>

<std>fifth</std>

<marks>60</marks>

</persondetails>

</student>

Web Technology - Html program for INLINE STYLESHEET (internal css)

<head>

<title> Inline CSS</title>

</head>

<body>

<style type="text/css">

h1{ font-fmaily:arial; font-size:large; font-weight:bold}

p{ font-size:smaller; color:blue}

h1{ color:Green; font-size: 75}

</style>

<h1> HI</h1>

<p> this is an program for inline</p>

<h2> THE END</h2>

</body>

</html>

OUTPUT:

Web Technology - Fixing/ Mapping hotpost in image program using map and area tag

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Untitled Page</title>

</head>

<body>

<center>

<b> FIXING THE HOTSPOT</b>

<hr />

<map name="picture">

<img src="dow.jpg" alt="Deal of the day" usemap="picture"/>

<area shape="rect" coords="190,137,13,307" href="1.html" />

<area shape="rect" coords="1,2,3,4" href="1.html" />

<area shape="rect" coords="1,2,3,4" href="1.html" />

<area shape="rect" coords="1,2,3,4" href="1.html" />

<area shape="rect" coords="1,2,3,4" href="1.html" />

<area shape="rect" coords="1,2,3,4" href="1.html" />

</map>

</center>

</body>

</html>

OUTPUT:

you have to add 4 more html files in area tag (1.html to you own.html)

you can adjust co-ordinates of your own.

Web Technology - Form Validation using HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Form</title>

</head>

<body>

<form action="#" name="form" onsubmit="validate()">

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

Email : <input type="text" name="email" /><br />

Pin    : <input type="text" name="pin" /><br />

Country: <select name="country">

<option value="1" >USA</option>

<option value="2" >UK</option>

<option value="3">India</option>

</select>

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

</form>

<script type="text/javascript">

    function validate()

     {

         if (document.form.name.value == "")

         {

            alert(" Enter a name ");

            return false;

        }

        if (document.form.email.value == "")

        {

            alert(" Enter a mail id ");

        }

        if (document.form.pin.value == "");

        {

            alert(" Enter a pin ");

        }

        if (document.form.country.value == "");

        {

            alert(" country");

        }



    }

</script>

</body>

</html>

OUTPUT:

    Form

Pages