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

4 comments: