$.ajax을 이용한 입력,삭제,수정,읽기 프로그램(페이징 프로그램,검색 프로그램)

com.example.domain>AddressVO.java

package com.example.domain;
 
public class AddressVO {
    private int id;
    private String name;
    private String address;
    private String tel;
    
    
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getAddress() {
        return address;
    }
    public void setAddress(String address) {
        this.address = address;
    }
    public String getTel() {
        return tel;
    }
    public void setTel(String tel) {
        this.tel = tel;
    }
    
    
    @Override
    public String toString() {
        return "AddressVO [id=" + id + ", name=" + name + ", address=" + address + ", tel=" + tel + "]";
    }
    
    
}
 

com.example.domain>Criteria.java

//시작 페이지,DISPLAY,페이지 정보
package com.example.domain;
public class Criteria{
      private int page;
      private int perPageNum;
      //한 페이지에 출력할 수 있는 개수
      public Criteria(){
        this.page = 1;
        this.perPageNum = 3;
        //한 페이지당 3개가 나온다.
      }
      //페이지를 입력 안했을때 설정
      public void setPage(int page){
        if (page <= 0){
          this.page = 1;
          return;
        }
        this.page = page;
      }
      //시작 페이지 지정 메서드
      public void setPerPageNum(int perPageNum){
        if(perPageNum <= 0 || perPageNum > 100){
          this.perPageNum = 10;
          return;
        }
        this.perPageNum = perPageNum;
      }
      public int getPage(){
        return page;
      }
      //실저 데이터를 몇개 부터 가져올지 가져오는 메서드
      public int getPageStart(){
        return (this.page - 1) * perPageNum;
      }
      
      public int getPerPageNum(){
        return this.perPageNum;
      }
      @Override
      public String toString(){
        return "Criteria [page=" + page + ", " + "perPageNum=" + perPageNum + "]";
      }
    }

com.example.domain>PageMaker.java

//페이지 번호 클래스
package com.example.domain;
public class PageMaker{
      private int totalCount;
      
      private int startPage;
      private int endPage;
      
      //true,false 값으로 리턴
      private boolean prev;
      //이전 버튼이 보여지는지
      private boolean next;
      //다음 버튼이 보여지는지
      
      private int displayPageNum = 10;
      //한페이지당 보여지는 데이터 개수
      
      private Criteria cri;
      
      public void setCri(Criteria cri){
        this.cri = cri;
      }
      public void setTotalCount(int totalCount){
        this.totalCount = totalCount;
        calcData();
      }
      private void calcData(){
        endPage = (int) (Math.ceil(cri.getPage() / (double) displayPageNum) * displayPageNum);
        startPage = (endPage - displayPageNum) + 1;
        int tempEndPage = (int) (Math.ceil(totalCount / (double) cri.getPerPageNum()));
        if(endPage > tempEndPage){
          endPage = tempEndPage;
        }
        prev = startPage == 1 ? false : true;
        next = endPage * cri.getPerPageNum() >= totalCount ? false : true;
      }
    public int getStartPage() {
        return startPage;
    }
    public void setStartPage(int startPage) {
        this.startPage = startPage;
    }
    public int getEndPage() {
        return endPage;
    }
    public void setEndPage(int endPage) {
        this.endPage = endPage;
    }
    public boolean isPrev() {
        return prev;
    }
    public void setPrev(boolean prev) {
        this.prev = prev;
    }
    public boolean isNext() {
        return next;
    }
    public void setNext(boolean next) {
        this.next = next;
    }
    public int getDisplayPageNum() {
        return displayPageNum;
    }
    public void setDisplayPageNum(int displayPageNum) {
        this.displayPageNum = displayPageNum;
    }
    public int getTotalCount() {
        return totalCount;
    }
    public Criteria getCri() {
        return cri;
    }
}
 

com.example.domain>SearchCriteria.java

//Criteria 상속
package com.example.domain;
 
 
public class SearchCriteria extends Criteria{
    private String searchType;
    private String keyword;
    
    public String getSearchType() {
        return searchType;
    }
    public void setSearchType(String searchType) {
        this.searchType = searchType;
    }
    public String getKeyword() {
        return keyword;
    }
    public void setKeyword(String keyword) {
        this.keyword = keyword;
    }
    @Override
    public String toString() {
        return "SearchCriteria [searchType=" + searchType + ", keyword=" + keyword + "]";
    }
}
 

com.example.persistence>AddressDAO.Interface

package com.example.persistence;
 
import java.util.List;
 
import com.example.domain.AddressVO;
import com.example.domain.SearchCriteria;
 
public interface AddressDAO {
    public List<AddressVO> list(SearchCriteria cri) throws Exception;
    public int total() throws Exception;
    
    public List<AddressVO> slist(SearchCriteria cri) throws Exception;
    public int stotal(SearchCriteria cri) throws Exception;
    
    public void delete(int id) throws Exception;
    public void insert(AddressVO vo)throws Exception;
    
    public AddressVO read(int id) throws Exception;
    public void update(AddressVO vo) throws Exception;
}
 

src/test/java-com.example.web-DBTest.java

 

package com.example.web;
import javax.inject.Inject;
 
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
 
import com.example.domain.SearchCriteria;
import com.example.persistence.AddressDAO;
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations={"file:src/main/webapp/WEB-INF/spring/**/*.xml"})
public class DBTest {
    @Inject
    AddressDAO dao;
    
    @Test
    public void list() throws Exception{
        SearchCriteria cri=new SearchCriteria();
        cri.setPage(2);
        cri.setPerPageNum(10);
        dao.list(cri);
    }
}
 

com.example.web>AddressController.java

package com.example.persistence;
 
import java.util.List;
 
import javax.inject.Inject;
 
import org.apache.ibatis.session.SqlSession;
import org.springframework.stereotype.Repository;
 
import com.example.domain.AddressVO;
import com.example.domain.SearchCriteria;
 
@Repository
public class AddressDAOImpl implements AddressDAO {
    
    @Inject
    SqlSession session;
    private static final String namespace="AddressMapper";
    
    @Override
    public List<AddressVO> list(SearchCriteria cri) throws Exception {
        // TODO Auto-generated method stub
        return session.selectList(namespace + ".list" ,cri);
    }
 
    @Override
    public int total() throws Exception {
        // TODO Auto-generated method stub
        return session.selectOne(namespace +".total");
    }
 
    @Override
    public List<AddressVO> slist(SearchCriteria cri) throws Exception {
        // TODO Auto-generated method stub
        return session.selectList(namespace +".slist",cri);
    }
 
    @Override
    public int stotal(SearchCriteria cri) throws Exception {
        // TODO Auto-generated method stub
        return session.selectOne(namespace +".stotal", cri);
    }
 
    @Override
    public void delete(int id) throws Exception {
        // TODO Auto-generated method stub
        session.delete(namespace +".delete" ,id);
    }
 
    @Override
    public void insert(AddressVO vo) throws Exception {
        // TODO Auto-generated method stub
        session.insert(namespace+".insert",vo);
    }
 
    @Override
    public AddressVO read(int id) throws Exception {
        // TODO Auto-generated method stub
        return session.selectOne(namespace +".read", id);
    }
 
    @Override
    public void update(AddressVO vo) throws Exception {
        // TODO Auto-generated method stub
        session.update(namespace +".update",vo);
    }
 
}
 

src/main/resource>mappers>AddressMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
    PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper  namespace="AddressMapper">
    <select id="list" resultType="com.example.domain.AddressVO">
        select * from tbl_address 
        order by id desc
        limit #{pageStart},#{perPageNum}
    </select>
    <select id="total" resultType="int">
        select count(*) from tbl_address
    </select>
    
    <select id="slist" resultType="com.example.domain.AddressVO">
        select * from tbl_address 
        <if test="searchType=='name'">
            where name like concat('%',#{keyword} ,'%')
        </if> 
        <if test="searchType=='address'">
            where address like concat('%',#{keyword},'%')
        </if>
        order by id desc
        limit #{pageStart},#{perPageNum}
    </select>
    
    
    <select id="stotal" resultType="int">
        select count(*) from tbl_address
        <if test="searchType=='name'">
            where name like concat('%',#{keyword} ,'%')
        </if> 
        <if test="searchType=='address'">
            where address like concat('%',#{keyword},'%')
        </if>
    </select>
    <delete id="delete">
        delete from tbl_address 
        where id=#{id}
    </delete>
    <insert id="insert">
        insert into tbl_address(name,tel,address) 
        values(#{name},#{tel},#{address})
    </insert>
    <select id="read" resultType="com.example.domain.AddressVO">
        select * from tbl_address where id=#{id}
    </select>
    <update id="update">
        update tbl_address  set   name=#{name},address=#{address},tel=#{tel}
        where id=#{id}
    </update>
</mapper>
 

[src]-[main]-[webapp]-[WEB-INF]-[views]-list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>주소목록</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 
<!-- 부가적인 테마 -->
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
 
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<style>
#D {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow-y: scroll;
    display: none;
}
 
#L {
    width: 700px;
    margin: 20px auto;
    padding: 15px;
    border: 1px solid #333333;
    border-radius: 5px;
    background: white;
    box-shadow: 0px 5px 5px rgba(34, 25, 25, 0.4);
    text-align: center;
}
</style>
</head>
<body>
    <h1>[주소입력]</h1>
    <div>
        <table border=1 width=700 class="table table-bordered">
            <tr>
                <td>이름</td>
                <td><input type="text" id="txtName"></td>
            </tr>
            <tr>
                <td>☏전화번호☏</td>
                <td><input type="text" id="txtTel"></td>
            </tr>
            <tr>
                <td>주소</td>
                <td><input type="text" id="txtAddress"></td>
            </tr>
        </table>
        <input type="button" value="입력" id="btnInsert">
    </div>
    <h1>[주소목록]</h1>
    <div>
        <select id="searchType">
            <option value="name">이름</option>
            <option value="address">주소</option>
        </select> <input type="text" id="keyword"> <input type="button"
            value="검색" id="btnSearch">
    </div>
    데이터:
    <span id="total"></span>
    <table border=1 width=700 class="table table-bordered">
        <tr>
            <th>NO.</th>
            <th>NAME.</th>
            <th>TEL.</th>
            <th>ADDRESS.</th>
            <th>DELETE.</th>
            <th>UPDATE.</th>
        </tr>
    </table>
    <table id="tbl" border=1 width=700 class="table table-bordered"></table>
    <script id="temp" type="text/x-handlebars-template">
    {{#each list}}
    <tr class="row">
        <td class="id">{{id}}</td>
        <td>{{name}}</td>
        <td>{{tel}}</td>
        <td>{{address}}</td>
        <td><button class="btnDelete" bid="{{id}}">삭제</button></td>    
        <td><button class="btnUpdate" bid="{{id}}">수정</button></td>    
    </tr>
    {{/each}}
    </script>
    <!-- 라이트박스 -->
 
    <div id="D">
        
        <div id="L">
        <input type="text" id="editId">
        <table border=1 width=700 class="table table-bordered">
            <tr>
                <td>이름</td>
                <td><input type="text" id="editName"></td>
            </tr>
            <tr>
                <td>☏전화번호☏</td>
                <td><input type="text" id="editTel"></td>
            </tr>
            <tr>
                <td>주소</td>
                <td><input type="text" id="editAddress"></td>
            </tr>
        </table>
        <input type="button" value="저장" id="btnSave">
            <button id="btnClose">닫기</button>
 
        </div>
 
   </div>
    <ul id="pagination" class="pagination"></ul>
</body>
<script>
 
    $("#tbl").on("click",".row .btnUpdate", function(){
        $("#D").show();
        var id=$(this).attr("bid");
        $("#editId").val(id);
        $.ajax({
            type:"get",
            url:"read.json",
            data:{"id":id},
            success:function(data){
                $("#editName").val(data.name);
                $("#editTel").val(data.tel);
                $("#editAddress").val(data.address);
            }
        });
        
        
    });    
    $("#btnClose").on("click", function(){
        $("#D").hide();
    });
    var page = 1;
    var searchType = $("#searchType").val();
    var keyword = $("#keyword").val();
 
    $("#tbl").on("click", ".row .btnDelete", function() {
        if (!confirm("삭제하시겠습니까?"))
            return;
        var id = $(this).parent().parent().find(".id").html();
        //alert(id);
        $.ajax({
            type : "post",
            url : "delete",
            data : {
                "id" : id
            },
            success : function() {
                getList();
            }
        });
    });
    $("#btnSave").on("click", function(){
        var id=$("#editId").val();
        var name=$("#editName").val();
        var tel=$("#editTel").val();
        var address=$("#editAddress").val();
        
        $.ajax({
            type:"post",
            url:"update",
            data:{"id":id,"name":name,"tel":tel,"address":address},
            success:function(){
                alert("저장되었습니다.");
                $("#D").hide();
                getList();
            }
        });
    });
    $("#btnInsert").on("click", function() {
        //alert("확인");
 
        var name = $("#txtName").val();
        var tel = $("#txtTel").val();
        var address = $("#txtAddress").val();
        //alert(name +"-"+ tel +"-"+ address);
 
        /*
        if(name.length==0 || tel.length==0 || address==0){
            alert("데이타를  잘 입력하세요 ");
            return;
        }
         */
 
        $.ajax({
            type : "post",
            url : "insert",
            data : {
                "name" : name,
                "tel" : tel,
                "address" : address
            },
            success : function() {
                alert("저장되었습니다.");
                getList();
            }
        });
 
    });
 
    getList();
    function getList() {
        $.ajax({
            type : "get",
            url : "list.json",
            data : {
                "page" : page,
                "searchType" : searchType,
                "keyword" : keyword
            },
            dataType : "json",
            //받는 data가 json이라는 뜻
            success : function(data) {
                var temp = Handlebars.compile($("#temp").html());
                $("#tbl").html(temp(data));
                $("#total").html(data.total);
                var str = "";
 
                if (data.pm.prev) {
                    str = str + "<li>" + "<a href='" + (data.pm.startPage - 1)
                            + "'>◀</a></li>";
                }
 
                for (var i = data.pm.startPage; i <= data.pm.endPage; i++) {
                    if (page == i) {
                        str = str + "<li class='active'>"
                                + "<a href='" + i + "'>" + i + "</a></li>";
                    } else {
                        str = str + "<li>" + "<a href='" + i + "'>" + i
                                + "</a></li>";
                    }
 
                }
                if (data.pm.next) {
                    str = str + "<li>" + "<a href='" + (data.pm.endPage + 1)
                            + "'>▶ </a></li>";
                }
                $("#pagination").html(str);
            }
        });
    }
    $("#pagination").on("click", "li a", function(event) {
        event.preventDefault();
        page = $(this).attr("href");
        //alert(page);
        getList();
    });
    $("#btnSearch").on("click", function() {
        searchType = $("#searchType").val();
        keyword = $("#keyword").val();
        page = 1;
        getList();
    });
    $("#keyword").keydown(function(key) {
        if (key.keyCode == 13) {
            searchType = $("#searchType").val();
            keyword = $("#keyword").val();
            page = 1;
            getList();
        }
    });
</script>
</html>