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