Showing posts with label JSP. Show all posts
Showing posts with label JSP. Show all posts

Simple Guess Number using Servlet

______________________________________________________________________________

 HelloServlet.java
______________________________________________________________________________

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

/**
 * Created by yubraj on 11/6/16.
 */
@WebServlet(urlPatterns = {"/HelloServlet"})
public class HelloServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.println("<html>");
        out.println("<body>");
        out.println("Hello World");
        out.println("</body>");
        out.println("</html>");
        out.flush();
        out.close();
    }
}

________________________________________________________________________________

LogonServlet.java
______________________________________________________________________________

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

/**
 * Created by yubraj on 11/6/16.
 */
@WebServlet(name = "LogonServlet", urlPatterns = {"/LogonServlet"})
public class LogonServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        PrintWriter out = response.getWriter();
        out.println("<html>");
        out.println("<body>");
        if(username.equals("user") && password.equals("pass")){
            out.print("Welcome user");
        }else {
            out.print("Wrong UserId or Password! Please try again");
            out.println("<form method=POST action=LogonServlet>");
            out.println("Username=<input type=text name=username> <br>");
            out.println("Password=<input type=text name=password>");
            out.println("<input type=submit value='Logon'>");
            out.println("</form>");
        }
        out.println("</body>");
        out.println("</html>");
        out.close();

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        out.println("<html>");
        out.println("<body>");
        out.println("<form method=POST action=LogonServlet>");
        out.println("Username=<input type=text name=username> <br>");
        out.println("Password=<input type=text name=password>");
        out.println("<input type=submit value='Logon'>");
        out.println("</form>");
        out.println("</body>");
        out.println("</html>");
        out.close();
    }
}


______________________________________________________________________________

guessNumber.java
______________________________________________________________________________

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;

/**
 * Created by yubraj on 11/6/16.
 */
@WebServlet(name = "guessnumber", urlPatterns = {"/guessnumber"})
public class guessnumber extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        HttpSession session = request.getSession(true);
        PrintWriter out = response.getWriter();
        int num = Integer.parseInt(request.getParameter("number"));
        int randNumber = Integer.parseInt(session.getAttribute("randNum").toString());

        out.println("<html>" +
                "<head>" +
                "<title>Guess Number Game</title>" +
                "</head>" +
                "<body>");
        if(num == randNumber){
            out.println("Congratulation you won");
            out.println("<br><a href='/guessnumber'>Try Again</a>");
        }else if(num>randNumber){
            out.println("Number is too high. Try Again!");
            out.println("<br><a href='/guessnumber'>Try Again</a>");
        }else{
            out.println("Number is too low. Try Again!");
            out.println("<br><a href='/guessnumber'>Try Again</a>");
        }
        out.println("</body></html>");

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Random rand = new Random();
        int x = rand.nextInt(10);

        HttpSession session = request.getSession(true);
        session.setAttribute("randNum", x);

        PrintWriter out = response.getWriter();
        out.println("<html>" +
                "<head>" +
                    "<title>Guess Number Game</title>" +
                "</head>" +
                "<body>" +
                    "Enter the number between 1 and 10"+
                    "<form method=POST action=guessnumber>" +
                        "<input type=number name=number />" +
                        "<input type=SUBMIT value=Enter />" +
                    "</form>"+
                "</body></html>");
        System.out.println(x);
    }
}

------------------------------------------------------------------------------------------------------------
Web.xml
------------------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8"?>
<web-app 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"
         version="3.1">
    <servlet>
        <servlet-name>HelloServlet</servlet-name>
        <servlet-class>HelloServlet</servlet-class>
    </servlet>
</web-app>

Simple Guess Number Game using JSP

<%@ page import="java.util.ArrayList" %>
<%--
  Created by IntelliJ IDEA.
  User: yubraj
  Date: 11/20/16
  Time: 4:27 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>Number Guess System</title>
      <style>
          .error{ color: red; }
          .success { color: greenyellow; }
      </style>
  </head>
  <body>
    <h1>Hello world</h1>
    <%
        for(int i = 1; i<=10; i++){ %>
        <h5><%= +i%></h5>
    <% } %>
    <h1>Number Guess System</h1>
    <p>Guess Number within 1 and 10</p>

    <%
        final HttpSession       Sess = request.getSession();
        final boolean           JustStarted = Sess.isNew();
        final Integer           randomNumber;

        if(JustStarted){
                randomNumber = new Integer(new java.util.Random().nextInt(10));
                System.out.println("Random Number : " + randomNumber);
                Sess.setAttribute("number", randomNumber);
            } else {
                randomNumber = (Integer) Sess.getAttribute("number");
            }
    %>

    <%
        String inputText = request.getParameter("number");
        String errorMsg = null;
        boolean success = false;

        if(!JustStarted) {
            if (inputText != null && inputText.length() > 0) {
                int myNumber = Integer.parseInt(inputText);
                if (randomNumber != myNumber) {
                    if (myNumber > randomNumber)
                        errorMsg = "Number too large!";
                    else
                        errorMsg = "Number too Low!";
                } else {
                    errorMsg = "Congrats! you win";
                    success = true;
                }
            }
        }
    %>

    <div>
        <% if(errorMsg != null){ %>
            <p class="<% if(success){ %>
                        success
                       <% }else{ %>
                        error
                        <% } %>
                      ">
                <%= errorMsg %>
            </p>
        <% } %>
        <form method="post">
            <label for="number">Enter the Number : </label> <input type="tex" name="number" id="number" maxlength="3">
            <input type="submit" value="Submit">
        </form>
    </div>
  </body>
</html>

Post Data From Ajax or JQuery to Servlet or Database in Java

We are going to to develop web application using jsp with java servlet using ajax and jquery, there are some times you must have to pass data from jquery or ajax to servlet and save the data in to database for future update purpose.

In JS file, you must have to add this code,


Here is the data in json data: and set the id of getting from json data when button click, its assign dynamically to button according to json data.


<button id=\"showComment\" class=\"btn btn-default\" data-postid=\""+ JSON.parse(data)[i].postid


Here is the maincontainer is div and button postButton in inside the maincontainer. and  url:/Test/CommentServlet where Test is the application name and CommentServlet is the servlet name. and data is the post data in "postid": postid.


$("#mainContainer").on("click", "#PostButton", function() {
   var postid = $(this).data("postid");
   var my = $(this);
   $.ajax({
    "url":"/{application_name}/{Servelt_name}",
    "type" : "POST",
    "data":{"postid":postid}
   }).done(function(response) {
    if(response!=null){
     $(".alert-success").show("slow").html("Like Sucessfully");
     location.href=location.href;
    }

   })

  });


How to get data in servlet, in above we can get data which is postid in our case.



@WebServlet("/CommentServlet")
public class Like extends HttpServlet {
 private static final long serialVersionUID = 1L;
 PostService postService=new PostService();
    public Like() {
        super();
    }
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  
  
  int userid=1;
  int postid=Integer.parseInt(request.getParameter("postid"));
//just like postid, get the other things 
//We have post id here, save here comment in to database 

                
  
   
 }

}

No need to servelt mapping in web.xml with url mapping. if you want to mapping then please don't forget to mention the corrent url in jquery file.


Happy coding !!!

How to Create Online Dictionary using JSP and Servlet with Jquery

Our Project Structure::


Words.java : this Class is used to stored each words retrieved from the database.
discServlet.java : this is used to handle all the servlet request and responses
DBConnection.java : this is used to connect to sexy database called MySQL
db.propertise : this guy called security ;) contains the credential for the database as well all the information required to connect DB

dict.html: this is beautiful lady which is only thing that is visible in the web.  <3 <3

Now lets start to dive in to the ocean of love ( which means only for real programmers others please ignore this word called love )

Step 1 : Creating The database connection
/* * 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. */package com.disc.jdbc;import com.mysql.jdbc.Connection;import java.io.IOException;import java.io.InputStream;import java.sql.DriverManager;import java.sql.SQLException;import java.util.Properties;
/** * * @author yubraj */public class DBConnection {
    
    public static Connection connection = null;        public static void main() throws IOException, SQLException, ClassNotFoundException{
     connection = getConnection();    }
    

    
    public static Connection getConnection() throws IOException, SQLException, ClassNotFoundException{
        if(connection!=null) return connection;        else{
                Properties prop = new Properties();                InputStream input = DBConnection.class.getClassLoader().getResourceAsStream("/com/disc/resourses/db.properties");                prop.load(input);                String driver = prop.getProperty("driver");                String url = prop.getProperty("url");                String user = prop.getProperty("user");                String password = prop.getProperty("password");                Class.forName(driver);                connection = (Connection) DriverManager.getConnection(url, user, password);                System.out.println("Connection to MySQL is Establised...");                return connection;        }
    }
    
    public static void close() throws SQLException {
        DBConnection.connection.close();
    }
    
}

also db.properties
driver= com.mysql.jdbc.Driverurl= jdbc:mysql://localhost:3306/entriesuser= rootpassword=xxx


Step 2 : Writing our Mr. Tough servlet

package com.dict.servlets;
import com.disc.jdbc.DBConnection;import com.google.gson.Gson;import com.mysql.jdbc.Connection;import java.io.IOException;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.util.ArrayList;import java.util.logging.Level;import java.util.logging.Logger;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.ws.rs.core.MediaType;
/** * * @author yubraj */@WebServlet(name = "discServlet", urlPatterns = {"/discServlet"})
public class discServlet extends HttpServlet {
    
    @Override    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {    
        
         System.out.println("inside the servlet");         ArrayList<Words> map = new ArrayList<Words>();         String searchedWord = request.getParameter("word");         System.out.println("Searched Keyword: "+searchedWord);                try {
            Connection conn = DBConnection.getConnection();            map = getData(conn, request, response, searchedWord);            write(response, map);                                } catch (SQLException | ClassNotFoundException ex) {
            Logger.getLogger(discServlet.class.getName()).log(Level.SEVERE, null, ex);        } catch (Exception ex) {
            Logger.getLogger(discServlet.class.getName()).log(Level.SEVERE, null, ex);        }
    }

    private void write(HttpServletResponse response, ArrayList<Words> map) throws IOException{
        response.setContentType(MediaType.APPLICATION_JSON);        response.setCharacterEncoding("UTF-8");        response.getWriter().write(new Gson().toJson(map));    }
    
    
    
    @Override    public String getServletInfo() {
        return "Short description";    }// </editor-fold>
    private ArrayList getData(Connection conn, HttpServletRequest request, HttpServletResponse response, String searchedWord) throws SQLException, Exception {        
        ArrayList messageData = new ArrayList();                String selectSQL = "SELECT * FROM entries WHERE word = ? order by wordtype";        PreparedStatement preparedStatement = conn.prepareStatement(selectSQL);        preparedStatement.setString(1, searchedWord);        ResultSet rs = preparedStatement.executeQuery();        while (rs.next()) {
            Words words = new Words();            words.setWord(rs.getString("word"));            words.setWordtype(rs.getString("wordtype"));            words.setDefination(rs.getString("definition"));            messageData.add(words);        }
        return messageData;                    }
   

}

Step 3 : Creating our Beautiful lady i.e. View

<!DOCTYPE html>
<html>
    <head>
        <title>Online Dictionary</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="js/dict.js" type="text/javascript"></script>

    </head>
    <body>
        <div class="container">
           <section>
                <h2>Online Dictionery</h2>
                <form id="dictForm">
                <ul class="input-list mystyle clearfix">
                  <li >
                     <input type="text" name="word" placeholder=":Enter your word">
                  </li>
                  <li>
                    <input id="search" type="submit" value="Search">
                  </li>
                </ul>
                    </form>
              </section>
                <div id='loadingDiv'>
                        Please wait... 
                 </div> 
            
            <div id="result">
           
            </div>
        </div>
    </body>
</html>



Step 4 : Make over to our Beautiful Lady i.e style.css

/*
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.
*/
/* 
    Created on : Mar 15, 2016, 11:47:44 AM
    Author     : yubraj
*/

body{
       background-color: #dc2850;
    color: #505050;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.8;
}

section , .result{
  margin-bottom: 10px;
  padding: 30px;
  background-color: #efefef;
}

.result{
    margin-bottom: 5px;
}

.word{
    font-weight: bold;
}

.grammer{
    font-style: italic;
}

#loadingDiv{
       background-color: #EFEFEF;
        padding: 10px;
        margin-bottom: 10px;
        text-align: center;
        font-size: 20px;
}

/* headings */
h2 {
     margin-bottom: 0px;
    padding: 5px;
    font-size: 2em;
}

/* form elements */
label {
  display: block;
}

input[type="text"], input[type="submit"] {
  display: block;
  margin: 0;
  width: 100%;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: none;
  -moz-border-radius: none;
  -ms-border-radius: none;
  -o-border-radius: none;
  border-radius: none;
}


input[type="text"]:focus {
  outline: none;
}

/* lists */
ul.input-list {
  list-style: none;
  margin: 0 -10px;
  padding: 0;
}
ul.input-list li {
  display: block;
  padding: 0 10px;
  width: 46%;
  float: left;
  margin:5px;
}




/* ============================================================
  STYLE 1
============================================================ */
.mystyle input[type="text"], input[type="submit"]  {
  padding: 10px;
  border: solid 1px gainsboro;
  -webkit-transition: box-shadow 0.3s, border 0.3s;
  -moz-transition: box-shadow 0.3s, border 0.3s;
  -o-transition: box-shadow 0.3s, border 0.3s;
  transition: box-shadow 0.3s, border 0.3s;
}
.mystyle input[type="text"]:focus, .style-1 input[type="text"].focus {
  border: solid 1px #707070;
  -webkit-box-shadow: 0 0 5px 1px #969696;
  -moz-box-shadow: 0 0 5px 1px #969696;
  box-shadow: 0 0 5px 1px #969696;
}
.container{
    width:960px;
    margin: auto;
    padding: 10px;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Step 5 : Assigning some power to our Lady i.e. JQuery i.e dict.js


$(document).ready(function(){
    $('#loadingDiv').hide();
    
    $("#search").click(function(){
         $('#loadingDiv').show();
        event.preventDefault();
       $.ajax({
            type: "POST",
            url: 'discServlet',
            dataType: 'json',
            data:$("#dictForm").serialize(),
            success: function(resp) {
                $("#result").html(""); 
                var result="";
                if(resp.length=== 0){
                    $("#result").html("<section>No matching word found :(</section>");
                    $('#loadingDiv').fadeOut();
                }else{
                
                 $.each(resp, function(key,value) { 
                     $('#loadingDiv').fadeOut();
                        if(value['wordtype']===""){
                            result = result+ '<section><span class="word">'+value['word']+' </span> : <span class="desc">'+value['definition']+'</span></section>';
                        }
                        else
                             result = result+ '<section><span class="word">'+value['word']+' </span><span class="grammer"> ['+value['wordtype']+' ]</span> : <span class="desc">'+value['definition']+'</span></section>';
                });
                $("#result").html(result);
            }
        }
        });
    });
});

            

Step 6 : Tada Time 
Now runt he app using apache tomcat or Glassfish server.

Step 7 : Coffee time
Happy Coding with Coffee. This project can also be found on Github here : OnlineDictionery