How to Create Online Dictionary using JSP and Servlet with Jquery

Our Project Structure:: : this Class is used to stored each words retrieved from the database. : this is used to handle all the servlet request and responses : 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;import;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/");                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 {

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;import com.mysql.jdbc.Connection;import;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;
/** * * @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 ( {
            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>
        <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="//"></script>
        <script src="js/dict.js" type="text/javascript"></script>

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

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

       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;

    margin-bottom: 5px;

    font-weight: bold;

    font-style: italic;

       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;

/* ============================================================
============================================================ */
.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;
    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

            type: "POST",
            url: 'discServlet',
            dataType: 'json',
            success: function(resp) {
                var result="";
                if(resp.length=== 0){
                    $("#result").html("<section>No matching word found :(</section>");
                 $.each(resp, function(key,value) { 
                            result = result+ '<section><span class="word">'+value['word']+' </span> : <span class="desc">'+value['definition']+'</span></section>';
                             result = result+ '<section><span class="word">'+value['word']+' </span><span class="grammer"> ['+value['wordtype']+' ]</span> : <span class="desc">'+value['definition']+'</span></section>';


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