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

57 comments:

  1. The blog you presented was very nice and interesting which helped me to get update on the recent technologies.
    Angularjs training in chennai | Angularjs course in Chennai

    ReplyDelete
  2. Thanks for posting this useful content, Good to know about new things here, Let me share this,
    AngularJS Training in Chennai | AngularJS Training | AngularJS Training Institute in Chennai

    ReplyDelete
  3. Hi, I am really happy to found such a helpful and fascinating post that is written in well manner. Thanks for sharing such an informative post.
    VMware Exam Centers in Chennai | VMware Exam Centers in Velachery

    ReplyDelete
  4. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging…
    Pearson Vue Testing Center in Chennai | Java Exam Center in Velachery | Microsoft Dot net Certification in Velachery

    ReplyDelete
  5. Hi, I am really happy to found such a helpful and fascinating post that is written in well manner. Thanks for sharing such an informative post.
    Citrix Exams in Chennai | Xenapp exam center in Chennai

    ReplyDelete
  6. I conceive you have remarked some very interesting points , thanks for the post.
    VMware Exam Centers in Chennai | VMware Exam Centers in Velachery

    ReplyDelete
  7. Nice Post! It is really interesting to read from the beginning & I would like to share your blog to my circles, keep sharing…..
    Pearson Vue Testing Center in Chennai | Java Exam Center in Velachery | Microsoft Dot net Certification in Velachery

    ReplyDelete
  8. Nice information about delegate administrator My sincere thanks for sharing this post Please Continue to share this post..
    OCJP Exam Center in Chennai | OCJP Exam Center in Velachery

    ReplyDelete
  9. I conceive you have remarked some very interesting points , thanks for the post.
    Citrix Exams in Chennai | Xenapp exam center in Chennai

    ReplyDelete
  10. Great blog.you put Good stuff.All the topics were explained briefly.so quickly understand for me.I am waiting for your next fantastic blog.Thanks for sharing.
    ISTQB Certification Training in Chennai | Java Exam Center in Chennai | Microsoft Dot net Certification in Chennai

    ReplyDelete
  11. Very happy to see this blog. Gives a wonderful information with coded explanation. Thank you for this blog. very useful to me.
    No.1 Power System Project Center in Chennai | No.1 Power System Projects in Velachery

    ReplyDelete
  12. Very nice article.We have to learning for lot of new information.Thanks a lot.
    VMware Exam Centers in Chennai | VMware Exam Centers in Velachery

    ReplyDelete
  13. Thanks for sharing your informative article with impressive content.keep updating..
    OCJP Exam Center in Chennai | OCJP Exam Center in Velachery

    ReplyDelete
  14. That was a very informative post. Thank you so much. Keep posting more.
    VMware Exam Centers in Chennai | VMware Exam Centers in Velachery

    ReplyDelete
  15. Hi, I am really happy to found such a helpful and fascinating post that is written in well manner. Thanks for sharing such an informative post.
    Citrix Exams in Chennai | Xenapp exam center in Chennai

    ReplyDelete
  16. Excellent post. I have read your blog it's very interesting and informative. Keep sharing.
    CompTIA A+ Certifications Center in Chennai | A+ Exams in Perungudi

    ReplyDelete
  17. Thanks for sharing this valuable blog. Very clear step by step representation of the process. Keep updating.
    Cisco Certifications Exam Center in Chennai | Best Cisco Course in Thiruvanmiyur

    ReplyDelete
  18. A million thanks for sharing this. This whole thing is driving me crazy. Keep updating.
    Comptia Network+ Certification Courses in Chennai | Best N+ Courses in Tambaram

    ReplyDelete
  19. Very happy to see this blog. Gives a wonderful information with coded explanation...
    No.1 Power System Project Center in Chennai | Power System Projects in Velachery

    ReplyDelete
  20. Extraordinary blog. you put Good stuff. All the themes were clarified briefly.Thanks for sharing that post.Keep in blogging…
    No.1 Software Testing Training Institute in Chennai | Best Selenium Training Institute in Chennai | Web Designing Training Institute in Chennai

    ReplyDelete
  21. Needed to compose one little word yet thanks for the suggestions that you are contributed here, please do keep on sharing...
    ISTQB Certifications Course in Chennai | QA Testing in Medavakkam

    ReplyDelete
  22. Great blog.you put Good stuff.All the topics were explained briefly.so quickly understand for me.I am waiting for your next fantastic blog.Thanks for sharing.
    Android Certifications Exam Training in Chennai | Android Course in Adyar

    ReplyDelete
  23. Great blog.you put Good stuff.All the topics were explained briefly.so quickly understand for me.Thanks for sharing.
    Cisco CCNA Certification Course in Chennai | Excellent Cisco CCNA Course in Tambaram

    ReplyDelete
  24. Thank you for sharing this valuable information. But get out of this busy life and find some peace with a beautiful trip...CorelDraw Training Courses in Chennai | No.1 Multimedia Training in Guindy

    ReplyDelete
  25. Informative blog and it was up to the point describing the information very effectively. Thanks to blog author for wonderful and informative post...
    Cisco CCNP Certification Center in Chennai | CCNA Training in Velachery | No.1 CCNP Course in Guindy

    ReplyDelete
  26. Great blog.you put Good stuff.All the topics were explained briefly.so quickly understand for me...Thanks for sharing.
    Certified Ethical Hacking Training in Chennai | No.1 Ethical Hacking in Alandur

    ReplyDelete
  27. Hi, I am really happy to found such a helpful and fascinating post that is written in well manner. Thanks for sharing such an informative post.
    Advanced Blue Prism Training in Chennai | Advanced UIPath RPA Training in Chennai | Advanced Automation Anywhere Training in Chennai

    ReplyDelete
  28. Hi, I am really happy to found such a helpful and fascinating post that is written in well manner. Thanks for sharing such an informative post.
    RPA Training Course in Chennai | RPA Training Course in Velachery

    ReplyDelete
  29. Hi, I am really happy to found such a helpful and fascinating post that is written in well manner. Thanks for sharing such an informative post.
    Graphic Designing Training Institute in Chennai | Graphic Designing Training Institute in Velachery

    ReplyDelete
  30. Thanks for sharing your ideas on mobile application.Really useful to me.Continue sharing more like this.
    Certified Ethical Hacking Training in Chennai | Hacking Training in Saidapet

    ReplyDelete
  31. Hi, I am really happy to found such a helpful and fascinating post that is written in well manner. Thanks for sharing such an informative post.
    BluePrism Training Institute in Chennai | UIPath Training Institute in Chennai | Automation Anywhere Training Institute in Chennai

    ReplyDelete
  32. Impressive blog with lovely information. really very useful article for us thanks for sharing such a wonderful blog...
    Dot Net Project Center in Chennai | Dot Net Training in Guindy

    ReplyDelete
  33. Great blog.you put Good stuff.All the topics were explained briefly.so quickly understand for me.I am waiting for your next fantastic blog.
    Android Project Center in Chennai | No.1 Android Training in Velachery

    ReplyDelete
  34. Great blog.you put Good stuff.All the topics were explained briefly.so quickly understand for me.Thanks for sharing.
    Java Project Center in Chennai | No.1 Java Project Training in Porur

    ReplyDelete
  35. Wonderful article.It is to define the concepts very well.Clearly explain the information.It has more valuable information for encourage me to achieve my career goal.
    Embedded Project Center Training in Chennai | Best Embedded Project Course in Adambakkam

    ReplyDelete
  36. This technical post helps me to improve my skills set, thanks for this wonder article I expect your upcoming blog, so keep sharing...
    CLOUD COMPUTING Classes in Chennai | CLOUD COMPUTING Courses in Velachery

    ReplyDelete
  37. Interesting and worth able content is discussed here. The fact about current technology is explicitly stated over here. I do agree on your thoughts on how the influencers are taking advantage over emerging technology. Thanks for sharing this in here. Keep bloging like this.
    Selenium Testing Course in Chennai | Selenium Testing Course in Velachery

    ReplyDelete
  38. I have read all the articles in your blog. It was really impressed after reading it. Thanks for sharing.
    BSC Final Year Project Center in Chennai | MSC Project Training in Guindy

    ReplyDelete
  39. Hey, would you mind if I share your blog with my twitter group? There’s a lot of folks that I think would enjoy your content. Please let me know. Thank you.
    No.1 Blue Prism Training Institute in Chennai | No.1 Blue Prism Training Institute in Velachery | No.1 Blue Prism Training Institute in Kanchipuram

    ReplyDelete