POI API : -Creating exel on serverside and downloading it on client side using J2EE

//POI API : -Creating excel on server side and downloading it on client side using J2EE

Step 1 :-  Dowload this poi-3.8-20120326.jar from apache website
Step 2 :-  Create a dynamic web project and place above jar in the lib folder
Step  3:-   Create a jsp with name createExcel.jsp as given bellow

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%@page
    language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<html>
<head>
<title>createXlSheet</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h3> Poc on creating and modifying excel sheet </h3>
<form action="DemoServlet">//link to our servlet which will create excell and give it to us
<input type="submit" value="Create-xlsheet">
</form>
</body>
</html>

Step 4:- In web.xml make this as a first jsp to be loaded as given bellow

  <?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <display-name>Demoplots</display-name>
    <welcome-file-list>
        <welcome-file>jsps/createXlSheet.jsp</welcome-file>//depending on your location of your jsp it will change
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
    </welcome-file-list>
</web-app>

Step 5 :- Create the DemoServlet under the src folder as given bellow

import java.io.ByteArrayOutputStream;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.ss.usermodel.Cell;
import org.apache.poi.ss.usermodel.Row;
import org.apache.poi.ss.usermodel.Sheet;
import org.apache.poi.ss.usermodel.Workbook;
import org.apache.poi.ss.util.WorkbookUtil;

/**
 * Servlet implementation class DemoServlet
 */
@WebServlet("/DemoServlet")
public class DemoServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public DemoServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        System.out.println("enterring here");
        //set the content type as excel so that it will download it as  excell
        response.setContentType("application/vnd.ms-excel");
         //create a excel
        Workbook wb = new HSSFWorkbook();
        //creating sheet1
        Sheet sheet1 = wb.createSheet("Demophase1");
        // Create a row and put some cells in it. Rows are 0 based.
        Row row = sheet1.createRow((short) 0);
        // Create a cell and put a value in it.
        Cell cell = row.createCell(0);
        cell.setCellValue(1);

        // Or do it on one line.
        row.createCell(1).setCellValue(1.2);
        row.createCell(2).setCellValue("This is a string");
        row.createCell(3).setCellValue(true);
       
       //Creating sheet2 with name Demophase2
        Sheet sheet2 = wb.createSheet("Demophase2");
        String safeName = WorkbookUtil.createSafeSheetName("[Demophase3*?]"); // returns
                                                                        // " Demophase3  "
        Sheet sheet3 = wb.createSheet(safeName);
        ServletOutputStream out = response.getOutputStream();
        wb.write(out);
        out.flush();
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
    }

}
Step 6 :- Clean Build the project and run it

output :-




 now click on the Create-xlsheet 






The moment you click ok  you can see the excell sheet generated with three sheets and data only in first sheet

J2ee Tutorial part 2 :- Retrieving form data

//J2ee Tutorial part 2 :- Retrieving form data {The data entered by user will be taken and retrieved in the server side and again shown to the user using servlet}

Step 1 ;- create a dynamic web project as given in my Tutorial part 1
Step 2 ;- create a html page with name Weather.html under webcontent as given bellow
//Weather.html
<html>
    <head>
        <title>Weather Details</title>
    </head>
    <body>
        <form action="Weather" method="post">//form is of type post and our servlet is Weather
       
          <table>
            <tr>
              <th colspan="2">Observer Information</th>
            </tr>
            <tr>
              <td>Observer Id:</td>
              <td><input type="text" name="user" size="10" maxlength="5" /></td>
            </tr>
            <tr>
              <td>Observer Pasword:</td>
              <td><input type="password" name="password" size="10" maxlength="5" /></td>
            </tr>
            <tr>
              <td>Hidden Info:</td>
              <td><input type="hidden" name="hiddenInfo" value="Discrete Information" /></td>
            </tr>
          </table>
          <h2>Weather Report</h2>
          <p>Check all the types of weather you have observed today
            <br /><input type="checkbox" name="weathertype" value="rain" />Rain
            <br /><input type="checkbox" name="weathertype" value="showers" />Showers
            <br /><input type="checkbox" name="weathertype" value="snow" />Snow
            <br /><input type="checkbox" name="weathertype" value="sun" />Sun
            <br /><input type="checkbox" name="weathertype" value="fog" />Fog
          </p>
          <p>Choose today's highest recorded temperature
            <br /><input type="radio" name="temp" value="vlow" />Below zero degrees C
            <br /><input type="radio" name="temp" value="low" />0 to 10 degrees C
            <br /><input type="radio" name="temp" value="med" checked />11 to 20 degrees C
            <br /><input type="radio" name="temp" value="high"/>Above 20 degrees C
          </p>
         
          <h2>Weather Station</h2>
          <p>
            <select name="stations">
  <option value="ONE">Weather Station 1</option>
  <option value="TWO" selected>Weather Station 2</option>
  <option value="THREE">Weather Station 3</option>
</select>

          </p>


          <h2>Comments on the weather</h2>
          <textarea name="comments" rows="5" cols="35">Use this area to type additional commments about the weather</textarea>
          <p>
            <input type="submit" />//after filling data user will click this button
          </p>
         

        </form>
       
    </body>
</html>
Step3 :- Creating servlet under the src folder which will handle the server side logic of retrieving the user filled form data

package web.tutorial;

import java.io.*;
import java.util.*;

import javax.servlet.*;
import javax.servlet.http.*;

/**
 * This servlet exists to display all the parameters passed to it.
 */
public class WeatherParams extends HttpServlet {

    protected void doPost(
        HttpServletRequest request,
        HttpServletResponse response)
        throws ServletException, IOException {

        // Set appropriate content type for response, and obtain
        // the HTML output stream.
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();

        // Set up start of HTML page
        out.write("<HTML>\n<HEAD>\n<TITLE>Display Weather Parameters</TITLE>\n</HEAD>\n<BODY>");

        Enumeration paramNames = request.getParameterNames();
        while (paramNames.hasMoreElements()) {
            String paramName = (String) paramNames.nextElement();
            out.write("<h4>" + paramName + "</h4>");
            String[] paramValues = request.getParameterValues(paramName);
            for (int i =0; i < paramValues.length; i++ ) {
                out.write("<br />" + paramValues[i]);
            }
        }
       
        // Finish off the HTML page and close cleanly
        out.write("\n</BODY>\n</HTML>");
        out.close();

    }


}


Step 4 :- Url mapping for servlet in web.xml

<?xml version="1.0" ?>
<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">
 <display-name>J2ee tutorial part2</display-name>
  <welcome-file-list>
    <welcome-file>weather.html</welcome-file>
  </welcome-file-list>
  <servlet>
    <servlet-name>Weather</servlet-name>
    <servlet-class>web.tutorial.WeatherParams</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Weather</servlet-name>
    <url-pattern>/Weather</url-pattern>
  </servlet-mapping>
</web-app>

Step 5:- Clean build and run the project


Output:-





User fills the form  data and clicks the submit button :-

Post , get and all http methods explanation using HttpUrlConnection

//Post , get and all http methods explanation using HttpUrlConnection

import java.io.*;
import java.net.*;
import java.util.*;

/**
 *
 * The HttpClient class estabishes connections with web servers, and processes
 * all seven of the common-or-garden HTTP methods.
 */

public class HttpClient {

    private String theURL;

    private String theHttpMethod;

    private Map requestInfo;

    private Map responseInfo = new HashMap();

    private ArrayList responseBody = new ArrayList();

    private File fileForPut;

    private String dataForPost;

    private int responseCode;

    private HashMap responseCodeMappings = new HashMap();

    private String[] requestHeaders = { "Accept", "Accept-Charset",
            "Accept-Encoding", "Accept-Language", "Authorization", "Expect",
            "From", "Host", "If-Match", "If-Modified-Since", "If-None-Match",
            "If-Range", "If-Unmodified-Since", "Max-Forwards",
            "Proxy-Authorization", "Range", "Referer", "TE", "User-Agent" };

    private String[] responseHeaders = { "Accept-Ranges", "Age", "E-Tag",
            "Location", "Proxy-Authenticate", "Retry-After", "Server", "Vary",
            "WWW-Authenticate" };

    private String[] generalHeaders = { "Cache-Control", "Connection", "Date",
            "Pragma", "Trailer", "Transfer-Encoding", "Upgrade", "Via",
            "Warning" };

    private String[] entityHeaders = { "Allow", "Content-Encoding",
            "Content-Language", "Content-Length", "Content-Location",
            "Content-MD5", "Content-Range", "Content-Type", "Expires",
            "Last-Modified" };

    private HashMap headerMappings = new HashMap();

    /**
     * 
     */
    public HttpClient() {
        super();

        /*
         * An ugly but understandable way to initialise a map containing all the
         * HTTP response codes and their short descriptions.
         */
        // Initialise response code mappings
        // Informational 1xx
        responseCodeMappings.put(new Integer(100), "Continue");
        responseCodeMappings.put(new Integer(101), "Switching Protocols");
        // Successful 2xx
        responseCodeMappings.put(new Integer(200), "OK");
        responseCodeMappings.put(new Integer(201), "Created");
        responseCodeMappings.put(new Integer(202), "Accepted");
        responseCodeMappings.put(new Integer(203),
                "Non-Authoritative Information");
        responseCodeMappings.put(new Integer(204), "No Content");
        responseCodeMappings.put(new Integer(205), "Reset Content");
        responseCodeMappings.put(new Integer(206), "Partial Content");
        // Redirection 3xx
        responseCodeMappings.put(new Integer(300), "Multiple Choices");
        responseCodeMappings.put(new Integer(301), "Moved Permanently");
        responseCodeMappings.put(new Integer(302), "Found");
        responseCodeMappings.put(new Integer(303), "See Other");
        responseCodeMappings.put(new Integer(304), "Not Modified");
        responseCodeMappings.put(new Integer(305), "Use Proxy");
        responseCodeMappings.put(new Integer(306), "[Unused]");
        responseCodeMappings.put(new Integer(307), "Temporary Redirect");
        // Client Error 4xx
        responseCodeMappings.put(new Integer(400), "Bad Request");
        responseCodeMappings.put(new Integer(401), "Unauthorized");
        responseCodeMappings.put(new Integer(402), "Payment Required");
        responseCodeMappings.put(new Integer(403), "Forbidden");
        responseCodeMappings.put(new Integer(404), "Not Found");
        responseCodeMappings.put(new Integer(405), "Method Not Allowed");
        responseCodeMappings.put(new Integer(406), "Not Acceptable");
        responseCodeMappings.put(new Integer(407),
                "Proxy Authentication Required");
        responseCodeMappings.put(new Integer(408), "Request Timeout");
        responseCodeMappings.put(new Integer(409), "Conflict");
        responseCodeMappings.put(new Integer(410), "Gone");
        responseCodeMappings.put(new Integer(411), "Length Required");
        responseCodeMappings.put(new Integer(412), "Precondition Failed");
        responseCodeMappings.put(new Integer(413), "Request Entity Too Large");
        responseCodeMappings.put(new Integer(414), "Request-URI Too Long");
        responseCodeMappings.put(new Integer(415), "Unsupported Media Type");
        responseCodeMappings.put(new Integer(416),
                "Requested Range Not Satisfiable");
        responseCodeMappings.put(new Integer(417), "Expectation Failed");
        // Server Error 5xx
        responseCodeMappings.put(new Integer(500), "Internal Server Error");
        responseCodeMappings.put(new Integer(501), "Not Implemented");
        responseCodeMappings.put(new Integer(502), "Bad Gateway");
        responseCodeMappings.put(new Integer(503), "Service Unavailable");
        responseCodeMappings.put(new Integer(504), "Gateway Timeout");
        responseCodeMappings
                .put(new Integer(505), "HTTP Version Not Supported");

        /*
         * A more elegant way to load a map with header field names and their
         * category - whether request, response, general or entity.
         */
        loadFieldMappings();

    }

    /*
     * The loadFieldMappings() helper method associates all field names with
     * descriptive text for the category of field: whether request, response,
     * general or entity.
     */
    protected void loadFieldMappings() {
        String[] typeDescriptions = { "Request", "Response", "General",
                "Entity" };
        Object[] headerKeyArrays = { requestHeaders, responseHeaders,
                generalHeaders, entityHeaders };
        for (int i = 0; i < typeDescriptions.length; i++) {
            String[] keyArray = (String[]) headerKeyArrays[i];
            for (int j = 0; j < keyArray.length; j++) {
                headerMappings.put(keyArray[j], typeDescriptions[i]);
            }
        }

    }

    public void executeHttpRequest() {
        if ((theURL != null) && theURL.startsWith("http://")) {
            try {
                URL url = new URL(theURL);
                URLConnection connection = url.openConnection();
                if (connection instanceof HttpURLConnection) {
                    HttpURLConnection httpConnection = (HttpURLConnection) connection;
                    httpConnection.setRequestMethod(theHttpMethod);

                    /* Set up some standard request properties */
                    /* httpConnection
                            .setRequestProperty(
                                    "Accept",
                                    "image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, " +
                                    "application/vnd.ms-powerpoint, application/msword, application/x-shockwave-flash, * /*"); */
                    httpConnection.addRequestProperty("Accept", "image/gif");
                    httpConnection.addRequestProperty("Accept", "image/x-bitmap");
                    httpConnection.addRequestProperty("Accept", "image/jpeg");
                    httpConnection.addRequestProperty("Accept", "image/pjpeg");
                    httpConnection.addRequestProperty("Accept", "application/vnd.ms-excel");
                    httpConnection.addRequestProperty("Accept", "application/vnd.ms-powerpoint");
                    httpConnection.addRequestProperty("Accept", "application/msword");
                    httpConnection.addRequestProperty("Accept", "application/x-shockwave-flash");
                    httpConnection.addRequestProperty("Accept", "*/*");
                    httpConnection.setRequestProperty("Accept-Language",
                            "en-gb,en-us");
                    httpConnection.setRequestProperty("User-Agent",
                            "Mozilla/4.0");
                    httpConnection.setRequestProperty("If-Modified-Since",
                            "Tue, 15 Nov 1994 08:12:31 GMT");

                    // !!! ADD ADDITIONAL REQUEST PROPERTIES BELOW, FOLLOWING
                    // THE SAME
                    // PATTERN AS PROPERTIES ADDED ABOVE.

                    // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

                    // Load a map with request header fields
                    requestInfo = httpConnection.getRequestProperties();

                    // Special processing for PUT method requests
                    if (theHttpMethod.equalsIgnoreCase("PUT")) {
                        executePutRequest(httpConnection);
                    }

                    // Special processing for POST method requests
                    if (theHttpMethod.equalsIgnoreCase("POST")) {
                        executePostRequest(httpConnection);
                    }

                    // Load a map with response header fields
                    loadResponseInfo(httpConnection);

                    // Make status code accessible
                    responseCode = httpConnection.getResponseCode();

                    // Load an array list with the response body
                    loadResponseBody(httpConnection);

                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /*
     * The method loadResponseBody() loads an array list with the response body,
     * when present. Note that this could be a response body containing error
     * text (because the real resource could not be returned in the response
     * body for some reason).
     */
    protected void loadResponseBody(HttpURLConnection httpConnection)
            throws IOException {
        try {
            BufferedReader br = new BufferedReader(new InputStreamReader(
                    httpConnection.getInputStream()));
            for (String line = null; (line = br.readLine()) != null;) {
                responseBody.add(line);
            }
        } catch (IOException ioe) {
            ioe.printStackTrace();
        }

        // If no response body - could be because an error was returned.
        // Populate the response body with this instead.
        if (responseBody.size() == 0
                && (httpConnection.getResponseCode() > 400)) {
            BufferedReader br = new BufferedReader(new InputStreamReader(
                    httpConnection.getErrorStream()));
            for (String line = null; (line = br.readLine()) != null;) {
                responseBody.add(line);
            }
        }
    }

    /*
     * The loadResponseInfo() helper method takes response header fields and
     * coerces them into a modifiable map.
     */
    protected void loadResponseInfo(HttpURLConnection httpConnection) {
        // Load a map with response header fields
        Map headerFields = httpConnection.getHeaderFields();
        // Copy the unmodifiable map of header fields to a modifiable map -
        // so we can add more stuff to it.
        Set s = headerFields.keySet();
        Iterator i = s.iterator();
        while (i.hasNext()) {
            Object o = i.next();
            // Remove the spurious "null, null" response header
            // that creeps in somehow.
            String str = "" + o;
            if (!str.equals("null")) {
                responseInfo.put(o, headerFields.get(o));
            }
        }
    }

    /*
     * The executePostRequest() helper method processes data for posting, making
     * this available to the web server in a parameter called "postData".
     */
    protected void executePostRequest(HttpURLConnection httpConnection)
            throws IOException {
        httpConnection.setDoOutput(true);
        OutputStream os = httpConnection.getOutputStream();
        DataOutputStream dos = new DataOutputStream(os);
        dos.writeBytes("postData=" + dataForPost);
    }

    /*
     * The executePutRequest() helper method processes files for uploading to
     * the target web server and URL.
     */
    protected void executePutRequest(HttpURLConnection httpConnection)
            throws IOException, FileNotFoundException {
        httpConnection.setDoOutput(true);
        OutputStream os = httpConnection.getOutputStream();
        FileInputStream fis = new FileInputStream(fileForPut);
        int i;
        while ((i = fis.read()) != -1) {
            os.write(i);
        }
        os.close();
    }

    /* Getters & Setters */
    public String getTheHttpMethod() {
        return theHttpMethod;
    }

    public String getTheURL() {
        return theURL;
    }

    public void setTheHttpMethod(String string) {
        theHttpMethod = string;
    }

    public void setTheURL(String string) {
        theURL = string;
    }

    public Map getRequestInfo() {
        return requestInfo;
    }

    public ArrayList getResponseBody() {
        return responseBody;
    }

    public Map getResponseInfo() {
        return responseInfo;
    }

    public void setFileForPut(File file) {
        fileForPut = file;
    }

    public void setDataForPost(String string) {
        dataForPost = string;
    }

    public int getResponseCode() {
        return responseCode;
    }

    /*
     * The getTextForResponseCode() method returns the short description for a
     * given numeric response code.
     */
    public String getTextForResponseCode(int responseCode) {

        String responseCodeText;

        Integer i = new Integer(responseCode);
        responseCodeText = (String) responseCodeMappings.get(i);
        if (responseCodeText == null) {
            return "";
        } else {
            return responseCodeText;
        }

    }

    /*
     * The getTypeForHeaderKey() method returns the header field type (request,
     * response, header, entity) for a given header field name.
     */
    public String getTypeForHeaderKey(String key) {
        return (String) headerMappings.get(key);
    }
}

Appending user entered content to a file under webcontent using Servlets

//Appending user entered content to a file under webcontent using Servlets


import java.io.*;
import java.util.*;

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

/**
 * This servlet exists to process POST method requests only.
 * If text data is supplied in a parameter called "postData", this will
 * be appended to a file called "postData.txt".
 * Once the data is appended, the entire contents of the file
 * are returned as a web page.
 */
public class PostServlet extends HttpServlet {

    private static File postDataFile;

    protected void doPost(
        HttpServletRequest request,
        HttpServletResponse response)
        throws ServletException, IOException {

        // Get the posted date from the request body
        String postData = request.getParameter("postData");//getting the user entered data

        // Set up the text file
        postDataFile =
            new File(getServletContext().getRealPath("/") + "postData.txt");//creating a file under webcontent

        // Append posted data to a file
        // ... which means saving the file contents temporarily first
        ArrayList al = new ArrayList();
        FileReader fr = new FileReader(postDataFile);
        BufferedReader br = new BufferedReader(fr);
        String line;
        while ((line = br.readLine()) != null) {
            al.add(line);
        }
        br.close();
        br.close();
        // Now write the temporarily saved contents, and finish with the posted data
        FileWriter fw = new FileWriter(postDataFile);
        BufferedWriter bw = new BufferedWriter(fw);
        Iterator it = al.iterator();
        while (it.hasNext()) {
            line = (String) it.next();
            bw.write(line);
            bw.newLine();
        }
        bw.write(postData);
        bw.newLine();
        bw.close();
        fw.close();

        // Set appropriate content type for response, and obtain
        // the HTML output stream.
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();

        // Set up start of HTML page
        out.write("<HTML>\n<HEAD>\n<TITLE>Post Servlet</TITLE>\n</HEAD>\n<BODY>");

        // Retrieve the contents of the "posted data" file, and write
        // back the contents to a web page.
        fr = new FileReader(postDataFile);
        br = new BufferedReader(fr);
        out.write("\n<P>");
        while ((line = br.readLine()) != null) {
            out.write("\n<BR />" + line);
        }
        out.write("\n</P>");
        br.close();
        fr.close();

        // Finish off the HTML page and close cleanly
        out.write("\n</BODY>\n</HTML>");
        out.close();

    }

    public void init() throws ServletException {
        String thisClass = this.getClass().toString();
        String thisServlet = this.getServletName();
        System.out.println(
            "Servlet "
                + thisServlet
                + " initialized: full class name is "
                + thisClass);
    }

}

Jquery playing youtube vedioes

//Jquery playing youtube vedioes


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> // include jquery js

<link type="text/css"
    href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" rel="stylesheet" /> // include jquery css file

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> // include ui js file

<script  language="javascript" src="jquery.youtubepopup.min.js" > // include popup window is
</script>

<script>
$(document).ready(function() {

     $("#4eYSpIz2FjU").live("click", function(){
    $("img.youtube").YouTubePopup({youtubeId: '4eYSpIz2FjU', title: 'My New Title' }).click();// we will be passing our youtube id
});

});
</script>


<img class="youtube" id="4eYSpIz2FjU" src="https://img.youtube.com/vi/4eYSpIz2FjU/1.jpg" title="..."/> //on clicking of image the vedio will  start playing

Jquery Tutorial 1 with J2ee

//Jquery tutorial 1


Step 1 ) Download jquery-1.5.1.min.js this js file which is the base for jquery
Step 2) Download jquery.validate.min.js this js file which is base for validation
Step 3)Make a dynamic web project in eclipse and include the js files in webcontent under the jquerry folder as given bellow







Step 4) Make a jsp file with name login and place it in jsps folder as given above and paste the bellow content in it

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%@page
    language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<html>
<head>
<title>Jquery login</title>
<title>The jQuery Structure</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/jquerry/jquery-1.5.1.min.js"> </script>// main jquery js
<script type="text/javascript" src="<%=request.getContextPath() %>/jquerry/jquery.validate.min.js"></script>//validation js
   <script type="text/javascript">
    $(document).ready(function() {
       $("form").validate();//this is responsilble for validation
     });
   
   </script>
  
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<form action="" method="post">
<table>
<tr>
<th>Username:-</th>
<td> <input type="text" name="userName" class="required"></td>//add class required were ever you want validation
</tr>
<tr>
<th>
Password:-</th>
<td> <input type="text" name="password" class="required"></td>
</tr>
<tr>
<td>
<input type="submit" value="Login"/>
</td>
</tr>
</table>
</form>
</body>
</html>

Step 5) Right click on project clean build it and run it

output:-
the bellow will be the output if user clicks on submit without entering the data