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

96 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
  40. You truly did more than visitors’ expectations. Thank you for rendering these helpful, trusted, edifying and also cool thoughts on the topic.
    Automation Anywhere Training with Placement in Chennai | Automation Anywhere Training with Placement in Tambaram

    ReplyDelete
  41. Thanks for this grateful information. all this information is very important to all the users and can be used good at all this process.
    PHP Project Center in Chennai | PHP Project Center in Velachery

    ReplyDelete
  42. Hello! This is my first visit to your blog! We are a team of volunteers and starting a new initiative in a community in the same niche. Your blog provided us useful information to work on. You have done an outstanding job.
    JAVA and J2EE Training Institute in Chennai | JAVA and J2EE Training Institute in Velachery

    ReplyDelete
  43. I simply wanted to write down a quick word to say thanks to you for those wonderful tips and hints you are showing on this site.
    No.1 Automation Anywhere Training Institute in Chennai | No.1 Automation Anywhere Training Institute in Velachery

    ReplyDelete
  44. Thank you for sharing this valuable information. But get out this busy life and find some peace with a beautiful trip.
    BE Final Year Project Center in Chennai | BE Project in Velachery

    ReplyDelete
  45. Appreciation for really being thoughtful and also for deciding on certain marvelous guides most people really want to be aware of.
    No.1 Blue Prism Training Institute in Chennai | No.1 Blue Prism Training Institute in Kanchipuram

    ReplyDelete
  46. Great post and informative blog.it was awesome to read, thanks for sharing this great content to my vision.
    Python Certification Course in Chennai | Python Certification Course in OMR

    ReplyDelete
  47. Very interesting blog which helps me to get the in depth knowledge about the technology, Thanks for sharing such a nice blog…
    Blue Prism Robotic Process Automation in Chennai | Blue Prism Robotic Process Automation in Chennai

    ReplyDelete
  48. Thanks for sharing this valuable information.. I saw your website and get more details..Nice work...
    Hardware and Networking Training in Chennai | Hardware and Networking Training in Taramani

    ReplyDelete
  49. Appreciation for really being thoughtful and also for deciding on certain marvelous guides most people really want to be aware of.
    Python Exam Centers in Chennai | Python Exam Centers in Chennai

    ReplyDelete
  50. Very good and informative article. Thanks for sharing such nice article, keep on updating such good articles.
    C and C++ Training in Chennai | C and C++ Training in Taramani

    ReplyDelete
  51. I enjoyed reading the Post. It was very informative and useful.
    Oracle Training in Chennai | Oracle Training in Kanchipuram

    ReplyDelete
  52. Your Blog is really amazing with useful information you are shared here...Thank you for sharing such an informative and awesome post with us. Keep blogging article like this……..
    AWS Training Institute in Chennai | AWS Training Institute in Velachery

    ReplyDelete
  53. Nice Blog… Wonderful Information and really very much useful. Thanks for sharing and keep updating…
    Blueprism Exam Center in Chennai | Blueprism Exam Center in Velachery

    ReplyDelete
  54. Really I enjoy this blog….. Very nice post… Thanks for sharing and keep updating
    AWS Training Institute in Chennai | AWS Training Institute in Velachery

    ReplyDelete
  55. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge.
    BE Final Year Project Center in Chennai | BE Project in Madipakkam

    ReplyDelete
  56. Thank you so much for sharing such an amazing post with useful information with us. Keep updating such a wonderful blog….
    Best CCNA Training Institute in Chennai| CCNA Training Center in Velachery

    ReplyDelete
  57. 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.
    Ethical Hacking Training Course in Chennai | Ethical Hacking Training Course in Nanganallur

    ReplyDelete
  58. Nice blog…. with lovely information. Really very useful article for us thanks for sharing such a wonderful blog. Keep updating…..
    Best Linux Training Institute in Pallikaranai| Best Linux Training Institute in Velachery

    ReplyDelete
  59. Awesome article…. Really very helpful information for us. Keep it up. Keep blogging. Looking to reading your next post,. Thank You for Sharing This Information
    Best PCB Training Institute in Taramani| Best PCB Training Institute in Velachery

    ReplyDelete
  60. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge.
    RPA Training in Chennai | RPA Training in Pallikaranai

    ReplyDelete
  61. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge.
    Automation Anywhere Training in Chennai | Automation Anywhere Training in Pallavaram

    ReplyDelete
  62. Good Post…. Thanks for the useful information it’s very useful to read your blog. Keep blogging article like this.
    Best JAVA/J2EE Training Institute in Perungudi| Best JAVA/J2EE Training Institute in Velachery

    ReplyDelete
  63. Nice blog, really I feel happy to see this useful blog… Thanks for sharing this valuable information to our vision....
    Best AWS Training Institute in Medavakkam| Best AWS Training Institute in Velachery

    ReplyDelete
  64. Nice post. This post is very helpful. Thank you so much for sharing this post….
    Blue prism Training in Chennai | Blue prism Training in Besant Nagar

    ReplyDelete
  65. Really I enjoy this blog….. Very nice post… Thanks for sharing and keep updating.
    Ethical Hacking Training in Chennai | Ethical Hacking Training in ST. Thomas Mount

    ReplyDelete
  66. Really wonderful post.... My sincere thanks for sharing very useful information to the users... Please continue to share this kind of post
    Best Python Exams Center in OMR| Best Python Certification Exams in OMR

    ReplyDelete
  67. Nice blog, really I feel happy to see this useful blog… Thanks for sharing this valuable information to our vision....
    Automation Anywhere Training in Chennai | Automation Anywhere Training in Ashok Nagar

    ReplyDelete
  68. Thanks its Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us.
    Graphic Designing Training in Chennai | Graphic Designing Training in Keelkattalai

    ReplyDelete
  69. Wonderful blog… You provided very interesting information here. I feel happy to read this post. I hope that you will write many posts like this… Thanks for sharing and Keep updating…..
    Python Training Institute in Chennai | Python Training Institute in Velachery

    ReplyDelete
  70. Very interesting blog which helps me to get the in depth knowledge about the technology, Thanks for sharing such a nice blog…
    UIPath Training in Chennai | UIPath Training in Kanchipuram

    ReplyDelete
  71. Really I enjoy this blog….. Very nice post… Thanks for sharing and keep updating
    RPA Training in Chennai | RPA Training in Pallavaram

    ReplyDelete
  72. Nice post, i learn new information from your article... keep on sharing...
    BE Final Year Project Center in Chennai | BE Training in Guindy

    ReplyDelete