Membuat Search Data (Pencarian Data) dengan JSP dan MySQL

Membuat Search Data (Pencarian Data) dengan JSP dan MySQL

Kali ini penulis menggunakan syntax jsp sebagai scripting server languange dalam mencari data alias membuat sebuah aplikasi search engine atau mesin pencarian seperti om google, om yahoo, atau om bing. Seperti halnya search engine yang lain, sebenarnya cara kerjanya sama dan bahkan tidak ada bedanya. Pada artikel saya yang sebelumnya saya sudah membahas pembuatan search engine dengan php dan mysql.

Untuk membuat search engine atau mesin pencarian, bukalah ide java yaitu netbeans atau yang lainnya dan buatlah project baru dengan nama WebSearch atau terserah anda pastikan anda membuat project dengan java web -> web application. kemudian buatlah package dengan nama anda sepertihalnya penulis juga membuat dengan nama ghazali atau terserah anda pada source packages kemudian pada package tersebut buatlah file java class dengan nama koneksi (koneksi.java), Syntax database mysql seperti dibawah ini dan syntax java seperti dibawah syntax sql.

CREATE DATABASE IF NOT EXISTS `datasaya` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `datasaya`;

CREATE TABLE IF NOT EXISTS `situs` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `judul` varchar(100) NOT NULL,
  `deskripsi` text NOT NULL,
  `keyword` varchar(200) NOT NULL,
  `url` varchar(225) NOT NULL,
  `pemilik` varchar(45) NOT NULL,
  `tgl` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

koneksi.java

/*
 * 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 ghazali;

import java.sql.Connection;
import java.sql.DriverManager;

/**
 *
 * @author ghazali
 */
public class koneksi {
    private Connection conn;
    public Connection getConnection(){
        try {
            if(conn==null){
                Class.forName("com.mysql.jdbc.Driver");
                conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/datasaya", "root", "kodokijo");
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return conn;
    }
}

Selanjutnya pada web pages terdapat dua file jsp yaitu index.jsp dan search.jsp kalau belum ada silahkan dibuat terlebih dahulu, untuk syntax jspnya adan dibawah ini tinggal dikopi pastekan kedalam project anda.

index.jsp

<%-- 
    Document   : index
    Created on : Feb 25, 2014, 8:14:51 AM
    Author     : ghazali
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Search Engine</title>
        <style type="text/css">
 *{margin:auto;padding:0;}
 body{font-family:helvetica;}
 .con{width:500px;margin-top:200px;}
 label{display:block;font-weight:bolder;font-size:24pt;}
 input[type='search']{height:30px;width:400px;}
 button{padding:5px;width:80px;}
 i{color:#050;}
 </style>
    </head>
    <body>
        <div class="con">
 <form action="search.jsp" method="get">
  <p>
   <label>Mesin<i>Cari</i></label>
   <input type="search" name="cari"/>
   <button>Cari</button>
  </p>
 </form>
 </div>
    </body>
</html>

search.jsp

<%-- 
    Document   : search
    Created on : Feb 25, 2014, 8:17:33 AM
    Author     : ghazali
--%>

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="ghazali.koneksi"%>
<%@page import="java.sql.Connection"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
 *{margin:auto;padding:0;}
 body{font-family:helvetica;}
 .con{width:1024px;margin-top:10px;}
 label{width:300px;display:inline-block;font-weight:bolder;font-size:24pt;}
 input[type='search']{height:30px;width:400px;}
 button{padding:5px;width:80px;}
 i{color:#050;}
 .src{width:600px;margin-top:50px;}
 h3{color:#030;margin-top:10px;}
 section{}
 p a{text-decoration:none;color:#060;margin-bottom:10px;}
 </style>
    </head>
    <body>
        <div class="con">
 <form action="" method="get">
  <p>
   <label>Mesin<i>Cari</i></label>
                        <input type="search" name="cari" value="<% String s=request.getParameter("cari");out.print(s); %>"/>
   <button>Cari</button>
  </p>
 </form>
 </div>
 <div class="src">
 <%
            Connection conn= new koneksi().getConnection();
            Statement stat=conn.createStatement();
            String cari = request.getParameter("cari");
            String data = "Select * from situs where id like '%"+cari+"%' or judul like '%"+cari+"%' or deskripsi like '%"+cari+"%' or url like '%"+cari+"%' or pemilik like '%"+cari+"%' or tgl like '%"+cari+"%' or keyword like '%"+cari+"%'";
            ResultSet res= stat.executeQuery(data);
            while(res.next()){
 %>
            <h3><%= res.getString("judul")%></h3>
            <section><%= res.getString("deskripsi") %></section>
            <p><a href='<%= res.getString("url") %>'><%= res.getString("url") %></a></p>
 <%
            }
 %>
 </div>
    </body>
</html>

Sekian yang dapat saya sampaikan kalau ada kekurangan anda tinggal komentari aja sesuai keinginan anda, bebas komentar apa itu pedas atau enak. Untuk hasilnya bisa dilihat seperti dibawah ini.

search1-jsp-2042016

search2-jsp-2042016

search3-jsp-2042016

Download Source Code

Tags: ,