728x90

-개발환경-

IDE : Eclipse IDE for Enterprise Java Developers ver-2020-06 (4.16.0)
Tomcat : Tomcat v8.0 Server
JAVA : JAVA8
oracle : oracle 11g

 

-구성도-

 

 

-listView.jsp-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!--  jstl을 이용해 대입문,제어문,서식,함수를 사용하기 위해 아래의 내용을 코딩한다. -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!-- 대입문,제어문 -->
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><!-- 서식지정 -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><!-- 함수 -->
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<fmt:requestEncoding value="UTF-8"/>
 
    <c:set var="view" value="${guestbookList.list}"/>
    <table width="1000" align="center" border="1" cellpadding="5" cellspacing="0">
        <tr>
            <th>방명록 보기</th>
        </tr>
        <tr>
            <td align="right">
                ${guestbookList.totalCount}개 (${guestbookList.currentPage}/ ${guestbookList.totalPage})Page
            </td>
        </tr>
        <tr>
            <td>
            
                 <c:if test="${view.size() == 0}">
                    <marquee>테이블에 글이 존재하지 않습니다.</marquee>
                </c:if>
                
                <c:if test="${view.size() != 0}">
                
                    <jsp:useBean id="date" class="java.util.Date"/>
                
                    <c:forEach var="vo" items="${view}">
                        
                        <table width="99%" align="center" border="1" cellpadding="5" cellspacing="0"> <!-- 바깥표의 넓이에 99퍼 맞춘다 -->
                            <tr>
                                <td>
                                      ${vo.idx}.
                                     
                                     <c:set var="name" value="${fn:replace(vo.name,'<','&lt;')}"/>
                                     <c:set var="name" value="${fn:replace(name,'>','&gt;')}"/>
                                     ${name}님(${vo.ip}})이
                                     
                                     <c:if test="${date.year == vo.writedate.year && date.month == vo.writedate.month && date.date == vo.writedate.date }">
                                         <fmt:formatDate value="${vo.writedate}" pattern="HH:mm"/>
                                     </c:if>
                                     <c:if test="${date.year != vo.writedate.year || date.month != vo.writedate.month || date.date != vo.writedate.date }">
                                         <fmt:formatDate value="${vo.writedate}" pattern="yyyy/MM/dd(E)"/>
                                     </c:if>
                                     에 남긴글
                                     
                                     <c:set var="memo" value="${fn:replace(vo.memo,'<','&lt;')}"/>
                                     <c:set var="memo" value="${fn:replace(memo,'>','&gt;')}"/>
                                     <c:set var="memo" value="${fn:replace(memo,enter,'</br>')}"/>
                                    ${memo} 
                                    
                                     <input type="button" value="수정" onclick="location.href='selectByIdx.jsp?idx=${vo.idx}&currentPage=${guestbookList.currentPage}&job=update'"/>
                                     <input type="button" value="삭제" onclick="location.href='selectByIdx.jsp?idx=${vo.idx}&currentPage=${guestbookList.currentPage}&job=delete'"/>
                                     
                                </td>
                            </tr>
                        </table>
                        
                    </c:forEach>
                </c:if>
                
            </td> 
        </tr>
        
        <!-- 페이지 이동 버튼 -->
        <tr>
            <td align="center">
            
                <!--  맨 앞으로 -->
                <c:if test="${guestbookList.currentPage> 1}">
                    <input class="button button1" type="button" value="맨앞" title="첫 번째 페이지로 이동" onclick="location.href='?currentPage=1'"/>
                </c:if>
                <c:if test="${guestbookList.currentPage <= 1}">
                    <input class="button button2" type="button" value="맨앞" disabled="disabled" title="이미 첫 번째 페이지입니다."/> 
                </c:if>    
            
                <!--  10페이지 앞으로 -->    
                <c:if test='${guestbookList.startPage>1}'>
                    <input class="button  button1" type="button" value="이전" title="이전 10페이지로 이동" onclick="location.href='?currentPage=${guestbookList.startPage -1}'"/>    
                </c:if>
                <c:if test='${guestbookList.startPage<=1}'>
                    <input class="button button2" type="button" value="이전" disabled="disabled" title="이미 첫 번째 10페이지입니다."/> 
                </c:if>
                <!--  페이지 이동 -->                
                <c:forEach var="i" begin="${guestbookList.startPage}" end="${guestbookList.endPage}">
                    <c:if test="${guestbookList.currentPage==i}">
                        <input class="button button2" type="button" value="${i}" disabled="disabled"/>
                    </c:if>
                    <c:if test="${guestbookList.currentPage!=i}">
                        <input class="button button1" type="button" value="${i}" onclick="location.href='?currentPage=${i}'"/>
                    </c:if>
                </c:forEach>
    
                <!--  10페이지 뒤로 -->
                <c:if test="${guestbookList.endPage < guestbookList.totalPage}">
                    <input class="button  button1" type="button" value="다음" title="다음 10페이지로 이동" onclick="location.href='?currentPage=${guestbookList.endPage +1}'"/>    
                </c:if>
            
                <c:if test="${guestbookList.endPage >= guestbookList.totalPage}">
                    <input class="button button2" type="button" value="다음" disabled="disabled" title="이미 마지막 10페이지입니다."/> 
                </c:if>
            
                <!--  맨 뒤로 -->
                <c:if test="${guestbookList.currentPage < guestbookList.totalPage}">
                    <input class="button  button1" type="button" value="맨뒤" title="마지막 페이지로 이동" onclick="location.href='?currentPage=${guestbookList.totalPage}'"/>    
                </c:if>
            
                <c:if test="${guestbookList.currentPage >= guestbookList.totalPage}">
                    <input class="button button2" type="button" value="맨뒤" disabled="disabled" title="이미 마지막 페이지입니다."/> 
                </c:if>
            
            </td>
        </tr>
        
        <!-- 글쓰기 버튼 -->
        <tr>
            <td align="right">
                <input type="button" value="글쓰기" onclick="location.href='insert.jsp'"/>
            </td>
        </tr>
    </table>
 
 
</body>
</html>
cs
더보기

-Description-

외부의 request에 저장된요소 guestbookList , enter('\r\n' 이라는 문자열)

17 :  request.setCharacterEncoding("UTF-8");기능을 jstl로 수행 

19 : 이전 페이지의 request에 저장된 guestbookList의 
guestbookList.getList() 결과가 view에 저장됨,   EL,JSTL 표현을 사용

26 : 토탈 게시글수, 페이지정보출력

32~34 : 테이블에 저장된 글이 없으면 브라우저에 글이 없다고 출력한다. 

36~72 : 테이블에 저장된 글이 있으면 브라우저에 목록을 출력한다.

38 : useBean액션 태그를 이용해 오늘 날짜를 기억하는 Date클래스 객체를 선언한다.
Date date = new Date();와 같은 기능이 실행된다.
useBean액션 태그의 id는 객체변수이름 ,  class는 클래스명포함한 경로

40 : 반복문 수행, 변수명 vo 에 GuestbookVO 객체가 하나씩 담김.

47~48 :  .replace("<","&lt;").replace(">","&gt;")  와 동일한 수행 ,
47줄을 보면 알다 시피,  replace함수의 첫 인자로 이용할 변수이름이 쓰여졌다.

51~56 : 오늘 입력한 글은 시간만 나오게 하고 
어제 이전에 입력한 글은 날짜만 나오게 한다. 

59~61 : '<' , '>'  '\r\n' 을 특수기호로 인식하지 않게 한다.

64,65 :  글 수정,삭제 버튼 추가,  
두 버튼 모두  selectByIdx.jsp 로 이동. 
전달 되는것 = idx , currentPage , job

78~125 : 페이지 이동 버튼 다루는 구간.

83 : currentPage=1 로 전달 한다는데, 이게 어떻게 가능하냐하면, ..
현재 화면을 호출한 list.jsp가  pageContext.forward("listView.jsp"); 을 사용하였으므로,
currentPage를 처리하는 곳은 list.jsp이다.

128~132 : 글쓰기 버튼 구간으로, 클릭시 insert.jsp 로 이동

 

-list.jsp-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<%@page import="com.koreait.vo.GuestbookList"%>
<%@page import="com.koreait.service.SelectService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <%
     request.setCharacterEncoding("UTF-8");
int currentPage=1;
     try{
         currentPage=Integer.valueOf(request.getParameter("currentPage"));
    }catch(NumberFormatException e){}
     
     GuestbookList guestbookList = SelectService.getInstance().selectList(currentPage);
     request.setAttribute("guestbookList",guestbookList);
     
     request.setAttribute("enter", "\r\n");
     
     pageContext.forward("listView2.jsp");
 %>
</body>
</html>
cs
더보기

-Description-

역할 : currentPage를 넘겨받아 currentPage에 해당되는 1페이지 분량의 글 목록을 
테이블에서 얻어와서 request 영역에 저장한 후 1페이지 분량의
글을 listView.jsp로 넘겨준다.

외부의 request에 저장된요소 currentPage or null

14~17 : request로 부터 받은 currentPage를 저장.

19~20 :  1페이지 분량의 글목록과 페이징작업에 사용할 8개의 변수가 초기화된 
객체(GuestbookList 타입)를 request영역에 저장한다

22 : 글을 입력할 때 엔터키를 눌러 줄을 바꿔서 입력한 경우 저장된 값은 \r\n이므로 브라우저에는 <br/> 태그로 바꿔 출력하기 위해 작업을 진행한다. 
 바꿔치기 작업은 listView.jsp에서 수행됨 

24 : forward를 사용하여 .jsp파일을 호출 하였으므로.. 호출된 .jsp파일역시 request 영역이 된다.
ps)
request 영역은 요청을 받아서 응답하기까지 객체가 유효한 영역입니다.
Servlet에서 forward 또는 include를 사용하면, request 요청 객체가 공유되어서 request 영역이 됩니다.
Servlet에서 JSP로 객체를 보낼 때 사용하는 방법입니다.

 

-selectByIdx.jsp-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<%@page import="com.koreait.vo.GuestbookVO"%>
<%@page import="com.koreait.service.SelectService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
 <%
     request.setCharacterEncoding("UTF-8");
     int idx = Integer.valueOf(request.getParameter("idx"));
     int currentPage = Integer.valueOf(request.getParameter("currentPage"));
     String job= request.getParameter("job");
     
     GuestbookVO vo = SelectService.getInstance().selectByIdx(idx);
     
     if ( vo == null){
         out.println("<script>alert('"+idx+"번 글은 존재하지 않습니다."+"')</script>");
     }else{
         request.setAttribute("vo", vo);
         request.setAttribute("currentPage", currentPage);
         request.setAttribute("enter", "\r\n");
         pageContext.forward(job+".jsp");
     }
 %>
 
</body>
</html>
cs
더보기

-Description

수정 또는 삭제할 글 1건을 얻어와서 request 영역에
 저장한 후 수정 또는 삭제할 글을 브라우저에 표시하는 페이지로 넘겨준다. 

15~17: 외부로부터 데이터를 가져온다.  idx,currentPage,job

19 : 수정 또는 삭제할 글 1건을 얻어온다.

27 :  수정 또는 삭제할 글이 존재할 시에  delete.jsp 혹은 update.jsp가 수행됨

-SelectService.java-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
package com.koreait.service;
 
import java.sql.SQLException;
import java.util.HashMap;
 
import com.ibatis.sqlmap.client.SqlMapClient;
import com.koreait.dao.GuestbookDAO;
import com.koreait.ibatis.MyAppSqlConfig;
import com.koreait.vo.GuestbookList;
import com.koreait.vo.GuestbookVO;
 
public class SelectService {
 
    private static SelectService instance = new SelectService();
    private SelectService() { }
    public static SelectService getInstance() { return instance; }
    
    public GuestbookList selectList(int currentPage) {
        
        System.out.println("SelectService 클래스의 selectList() 메소드");
        SqlMapClient mapper = MyAppSqlConfig.getSqlMapInstance();
        
        GuestbookList guestbookList = null;
 
        GuestbookDAO dao = GuestbookDAO.getinstance();
        
        try {
            int pageSize = 10;
 
            int totalCount = dao.selectCount(mapper);
            
            guestbookList = new GuestbookList(pageSize, totalCount, currentPage);
            
            HashMap<String, Integer> hmap = new HashMap<String, Integer>();
            hmap.put("startNo", guestbookList.getStartNo());
            hmap.put("endNo", guestbookList.getEndNo());
//            mysql은 아래와 같이 'endNo' 대신 'pageSize'를 저장해서 넘겨주면 된다. 
//            hmap.put("pageSize", guestbookList.getPageSize());
            
            guestbookList.setList(dao.selectList(mapper, hmap));
        } catch (SQLException e) {
            e.printStackTrace();
        }
        
        return guestbookList;
    }
    
    public GuestbookVO selectByIdx(int idx) {
        System.out.println("SelectService의 selectByIdx()메소드");
        SqlMapClient mapper = MyAppSqlConfig.getSqlMapInstance();
        
        GuestbookVO vo = null;
        try {
        vo = GuestbookDAO.getinstance().selectByIdx(mapper,idx);
        }catch(SQLException e) {
            e.printStackTrace();
        }
        return vo;
    }
    
}
 
 
 
 
 
 
 
 
 
cs
더보기

-Description

Singleton 패턴

18 : list.jsp에서 호출이 됨. 화면에 표시할 페이지 번호를 넘겨받고 mapper를 얻어온 후
 DAO 클래스의 1페이지 분량의 글 목록을 얻어오는 메소드를 호출하는 메소드

21 : SqlMapClient  객체 생성

23 : 페이지 분량의 글과 페이징 작업에 사용할 8개의 변수를 저장해서 리턴시킬 객체를 선언한다.

28 :  1페이지당 표시할 글의 개수를 정한다.

30 : 테이블에 저장된 전체 글의 개수를 얻어온다. ( 실제 sql 수행 )

32 : pageSize, totalCount, currentPage를 GuestbookList 클래스의 생성자로 넘겨서
 1페이지 분량의 글을 저장하고 페이징 작업에 사용할 변수를 초기화 시키는 
GuestbookList 클래스 객체를 생성한다.

34~36 : <String,Integer> 형식의 해쉬맵생성후,  한 페이지의 첫글번호와 끝번호를 전달.

40 : dao를 통해 한페이지 분량의 게시글을 얻어와서 guestbookList의 list를 초기화 시킨다.( 실제 sql 수행 )

45 : guestbookList 을 리턴시킴

48 : selectByIdx.jsp에서 호출이됨
수정 또는 삭제할 글번호를 넘겨받고 
mapper를 얻어온후 DAO클래스의 글 1건을 얻어옴

50 : SqlMapClient 객체를 생성.

54 : DAO를 통해 특정 인덱스에 속하는 게시글 하나를 꺼내온다.(실제 sql 수행)

58 : 게시글 하나 반환.

-InsertService.java-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
package com.koreait.service;
 
import java.sql.SQLException;
 
import com.ibatis.sqlmap.client.SqlMapClient;
import com.koreait.dao.GuestbookDAO;
import com.koreait.ibatis.MyAppSqlConfig;
import com.koreait.vo.GuestbookVO;
 
public class InsertService {
 
    private static InsertService instance=new InsertService();
 
    private InsertService(){
        
    }     
    public static InsertService getInstance() {
        return instance;
    }
    
    
    public void insert(GuestbookVO vo) {
        System.out.println("InsertService클래스의 insert()메소드");
        
        SqlMapClient mapper=MyAppSqlConfig.getSqlMapInstance();
        
        try {
            GuestbookDAO.getinstance().insert(mapper,vo);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}
 
cs
더보기

-Description

Single톤 패턴임.

22 : 테이블에 저장할 객체 vo를 들여오고 ,   mapper와 dao를 통하여 db 작업을 수행.

25 : SqlMapClient  객체 생성.
mapper에는 데이터베이스에 연결하는 connection과 연결된 후 실행할
sql 명령(guestbook.xml)이 저장되어 있다.

28 : DAO 클래스를 통해  insert sql 명령이 실행되게 만든다. (실제 sql 수행)

-MyAppSqlConfig.java-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
package com.koreait.ibatis;
 
import java.io.Reader;
 
import com.ibatis.common.resources.Resources;
import com.ibatis.sqlmap.client.SqlMapClient;
import com.ibatis.sqlmap.client.SqlMapClientBuilder;
 
public class MyAppSqlConfig {
    private static final SqlMapClient sqlMap;//이게 mapper임
    static {    
        try {
            String resource = "com/koreait/ibatis/SqlMapConfig.xml";
            Reader reader = Resources.getResourceAsReader(resource);
            sqlMap = SqlMapClientBuilder.buildSqlMapClient(reader);
        } catch(Exception e) {
            e.printStackTrace();
            throw new RuntimeException ("Error : " + e);
        }
    }
    
    public static SqlMapClient getSqlMapInstance() {
        return sqlMap;
    }
}
 
cs
더보기

-Description

ibatis 설정 파일

10 : SqlMapClient 타입의 상수를 정적으로 생성.
final로 선언된 변수는 상수로 사용되므로 선언과 동시에 반드시 초기화되어야 한다.

11 : static 변수 초기화 블럭

13~15 : SqlMapConfig.xml( iBatis 설정정보 파일) 파일을 통하여 SqlMapClient  객체 생성

22~24 : 생성된 static상수인 SqlMapClient  객체를 반환.

-SqlMapConfig.xml-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?xml version="1.0" encoding="UTF-8"?>
<!-- DOCTYPE이 sqlMapConfig은 iBATIS의 환경을 설정하는 xml 파일이다. -->
<!DOCTYPE sqlMapConfig PUBLIC "-//iBATIS.com//DTD SQL Map Config 2.0//EN"
"http://ibatis.apache.org/dtd/sql-map-config-2.dtd">
<sqlMapConfig>
    <!-- 데이터베이스 연결 정보가 저장된 properties 파일의 프로젝트상의 경로 -->
    <properties resource="com/koreait/ibatis/db.properties" />
    <settings 
        cacheModelsEnabled="true" 
        enhancementEnabled="true"
        lazyLoadingEnabled="true" 
        maxRequests="32" 
        maxSessions="10"
        maxTransactions="5" 
        useStatementNamespaces="false" 
    />
    
    <!--  별명을 설정한다. -->
    <typeAlias alias="vo" type="com.koreait.vo.GuestbookVO" />
    <transactionManager type="JDBC">
        <dataSource type="SIMPLE">
            <property name="JDBC.Driver" value="${driver}" />
            <property name="JDBC.ConnectionURL" value="${url}" />
            <property name="JDBC.Username" value="${username}" />
            <property name="JDBC.Password" value="${password}" />
        </dataSource>
    </transactionManager>
    <!-- 데이터베이스에 연결한 후 실행할 sql 명령이 저장된 파일의 프로젝트상의 경로 -->
    <sqlMap resource="com/koreait/ibatis/guestbook.xml" />
</sqlMapConfig>
 
 
 
 
 
 
 
 
 
 
cs
 
더보기

-Description

iBATIS 설정 파일

2 : DOCTYPE이 sqlMapConfig은 iBATIS의 환경을 설정하는 xml 파일이라는 의미.

-db.properties-

1
2
3
4
driver=oracle.jdbc.driver.OracleDriver
url=jdbc:oracle:thin:@localhost:1521:xe
username=Shin
password=0000
cs
더보기

-Description

DB드라이버정보, url ,  DB계정정보가 담긴 파일.

-guestbook.xml-

29~35 : 3중 select

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?xml version="1.0" encoding="UTF-8" ?>
<!-- DOCTYPE이 sqlMap인 xml 파일은 처리할 SQL 명령을 기억하는 xml 파일이다. -->
<!DOCTYPE sqlMap PUBLIC "-//iBATIS.com//DTD SQL Map 2.0//EN" "http://ibatis.apache.org/dtd/sql-map-2.dtd">
<!-- 윗 줄은 CDN -->
<sqlMap namespace="com.koreait.vo.GuestbookVO"> 
    <!--  ibatis의 경우, namespace에는 무엇을 적어도 상관없음 -->
    <!-- id : SQL 명령을 식별한다. -->
    <!-- parameterClass : SQL 명령으로 전달되는 데이터의 타입을 적는다. -->
    <!-- resultClass : SQL 명령문에의해 출력되는 데이터의 타입을 적는다. -->
    
    <!-- 게시판에 글 1건을 저장한다. -->
    <insert id="insert" parameterClass="vo">
        <!-- nextval => 시퀀스 값을 1증가 시킨다. -->
        insert into guestbook (idx,name,password,memo,ip) values (guestbook_idx_seq.nextval,#name#,#password#,#memo#,#ip#)
    </insert>
    
    <!--  테이블에 저장딘 전체 글의 갯수를 얻어온다.  -->
    <select id= "selectCount" resultClass = "int">
        select count(*) from guestbook
    </select>        
    
    <!--  1페이지 분량의 글 목록을 얻어온다. -->
    <select id= "selectList" parameterClass="java.util.HashMap" resultClass="vo">
        <!-- <![CDATA[와 ]]> 사이에 입력된 내용은 무조건 문자열로 취급된다. -->
        <!-- rownum은 *을 못씀.
            rownum , rnum에는 index번호가 들어있음
            
         -->
        <![CDATA[
        select * from (
            select rownum rnum, GG.* from(
                select * from guestbook order by idx desc
            ) GG where rownum <= #endNo#
        ) where rnum >= #startNo#
        ]]>
        
        
    </select>
    
    <!-- 글 1건을 얻어온다-->
    <select id="selectByIdx" parameterClass="int" resultClass="vo">
        select * from guestbook where idx=#idx#
    </select>
    
    <delete id="delete" parameterClass="int">
        delete from guestbook where idx = #idx#
    </delete>
    
    <update id="update" parameterClass="com.koreait.vo.GuestbookVO">
        update guestbook set name = #name#, memo = #memo# where idx = #idx#
    </update>
</sqlMap>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
cs
더보기

-Description

29~35 : 3중 select

-GuestbookDAO.java-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
package com.koreait.dao;
 
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
 
import com.ibatis.sqlmap.client.SqlMapClient;
import com.koreait.vo.GuestbookVO;
 
public class GuestbookDAO {
    private static GuestbookDAO instance=new GuestbookDAO();
    
    private GuestbookDAO() {
    }
    
    public static GuestbookDAO getinstance() {
        return instance;
    }
    
    public void insert(SqlMapClient mapper,GuestbookVO vo) throws SQLException {
        System.out.println("GuestbookDAO 클래스의 insert()메소드");
        mapper.insert("insert", vo);
    }
    
    public int selectCount(SqlMapClient mapper) throws SQLException{
        System.out.println("GuestbookDAO 클래스의 selectCount() 메소드");
        return (int)mapper.queryForObject("selectCount");
    }
    
    public ArrayList<GuestbookVO> selectList(SqlMapClient mapper,HashMap<String,Integer> hmap) throws SQLException{
        System.out.println("GuestbookDAO클래스의 SelectList()메소드");
        return (ArrayList<GuestbookVO>) mapper.queryForList("selectList",hmap);//아이디는 메소드이름과 동일하게하는게 전통
    }
 
    public GuestbookVO selectByIdx(SqlMapClient mapper, int idx) throws SQLException {
        System.out.println("GuestbookDAO의 selectByIdx()메소드");
        return (GuestbookVO) mapper.queryForObject("selectByIdx", idx);
    }
 
    public void delete(SqlMapClient mapper, int idx) throws SQLException {
        System.out.println("GuestbookDAO클래스의 delete()메소드");
        mapper.delete("delete",idx);
    }
 
    public void update(SqlMapClient mapper, GuestbookVO vo) throws SQLException {
        System.out.println("GuestbookDAO클래스의 update()메소드");
        mapper.update("update",vo);
    }
 
    public int selectCountMemo(SqlMapClient mapper, String item) throws SQLException {
        System.out.println("GuestbookDAO클래스의 selectCountMemo()메소드");
        return (int) mapper.queryForObject("selectCountMemo",item);
    }
 
    public ArrayList<GuestbookVO> selectListMemo(SqlMapClient mapper, Params params) throws SQLException {
        System.out.println("GuestbookDAO클래스의 selectListMemo()메소드");
        return (ArrayList<GuestbookVO>) mapper.queryForList("selectListMemo",params);
    }
    
    public int selectCountName(SqlMapClient mapper, String item) throws SQLException {
        System.out.println("GuestbookDAO클래스의 selectCountName()메소드");
        return (int) mapper.queryForObject("selectCountName",item);
    }
 
    public ArrayList<GuestbookVO> selectListName(SqlMapClient mapper, Params params) throws SQLException {
        System.out.println("GuestbookDAO클래스의 selectListName()메소드");
        return (ArrayList<GuestbookVO>) mapper.queryForList("selectListName",params);
    }
    
        public int selectCountNameMemo(SqlMapClient mapper, String item) throws SQLException {
            System.out.println("GuestbookDAO클래스의 selectCountNameMemo()메소드");
            return (int) mapper.queryForObject("selectCountNameMemo",item);
        }
        
        public ArrayList<GuestbookVO> selectListNameMemo(SqlMapClient mapper, Params params) throws SQLException {
            System.out.println("GuestbookDAO클래스의 selectListNameMemo()메소드");
            return (ArrayList<GuestbookVO>) mapper.queryForList("selectListNameMemo",params);
        }
}
 
cs
더보기

-Description

싱글톤패턴 클래스임

20 : InsertService 클래스에서 mapper와 테이블에 저장할 데이터가 저장된 
객체를넘겨받고 guestbook.xml 파일의 insert sql 명령을 실행하는 메소드.

22 : 첫인자인 "insert"는  guestbook.xml에서 insert태그의 id 임.

25 : SelectService 클래스에서 mapper를 넘겨받고 테이블에 저장된 전체 글의 갯수를 얻어옴

27 : queryForObject() : select sql 명령의 실행 결과가 1건일 때 사용=>Object타입의 데이터를 결과로 얻어온다.
queryForList() : select sql 명령의 실행 결과가 여러건일 경우 사용한다.=> List 타입의 데이터를 결과로 얻어온다.


30 : SelectService 클래스에서 mapper와 1페이지분량의 글의 시작 인덱스와 끝 인덱스가 저장된
HashMap객체를 넘겨 받고 , 테이블에 저장된 전체 글 중에서 1페이지 분량에 해당되는
 글 목록을 얻어오는  명령을 실행하는 메소드

35 : SelectService 클래스에서 mapper와 수정 또는 삭제할 글번호를 넘겨받고 
테이블에 저장된 글 1건을 얻어오는명령을 실행하는 메소드

40 : 특정 idx에 해당하는 게시글 삭제

45 : 게시글 내용을 수정하는 메소드

50 : 사용자 검색을 위한 메소드,
SelectService 클래스에서 mapper와 검색어내용을 넘겨받고 
테이블에 저장된 전체 글 중에서 검색어를 포함하는 글의 갯수를
얻어오는 메소드

55 : 사용자 검색을 위한 메소드,
SelectService 클래스에서 mapper와 Params을 넘겨받고 
테이블에서 Params에 해당하는 게시글들을 얻어오는 메소드

60,70 : 사용자 검색을 위해 게시글의 수를 얻어오는 메소드

65,75 : 사용자 검색을 위한 메소드

-insert.jsp-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    
    <form action="insertOK.jsp" method="post">
        <table width="600" align="center" border="1" cellpadding="5" cellspacing="0"> 
            <tr>
                <th colspan="2">방명록 쓰기</th>
            </tr>
            <tr>
                <td width="100">이름</td>
                <td width="500"><input type="text" name="name"/></td>
            </tr>
            <tr>
                <td>비밀번호</td>
                <td><input type="password" name="password"/></td>
            </tr>
            <tr>
                <td>메모</td>
                <td><textarea row="10" cols="65" name="memo" style="resize: none;"></textarea></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="글남기기"/>
                    <input type="reset" value="다시쓰기"/>
                    <input type="button" value="돌아가기" onclick="history.back()"/>
                </td>
            </tr>
        </table>
    </form>
    
</body>
</html>
cs
더보기

-Description

View 부분

11 : submit 버튼 클릭시 , insertOK.jsp 로 이동,  name, password, memo가 request에 들어감.

-insertOK.jsp-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<%@page import="com.koreait.service.InsertService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
    request.setCharacterEncoding("UTF-8");
%>
 
<jsp:useBean id="vo" class="com.koreait.vo.GuestbookVO"> <!-- 객체생성 -->
    <jsp:setProperty property="*" name="vo"/>   <%-- vo객체의 setter가  전체로 수행됨 --%>
</jsp:useBean>
 
<%
    vo.setIp(request.getRemoteAddr());
    
    InsertService.getInstance().insert(vo);
    
    response.sendRedirect("list.jsp");
%>
 
 
 
</body>
</html>
cs
더보기

-Description

12 :  post 방식으로 데이터가 넘어올 때 한글 깨짐을 방지

15~17 : 넘어오는 데이터가 VO 클래스에 멤버로 존재하면 useBean으로 받고 존재하지 않으면 별도로 받아 VO클래스에 저장한다
useBean 액션 태그는 객체를 만들 때 사용한다. 
useBean 액션 태그의 id 속성에는 만들려 하는 객체의 이름을 쓴다.
useBean 액션 태그의 class 속성에는 객체를 만들려 하는 클래스 이름을 반드시 풀 패키지 이름과 같이 쓴다.

setProperty 액션 태그의 property 속성에는 setter 메소드를 실행할 멤버 변수의 이름을 쓴다.
setProperty 액션 태그의 name속성에는 setter 메소드가 작성된 클래스 객체의 이름을 쓴다.
setProperty 액션 태그를 사용하면 request.getParameter() 메소드로 넘어오는 데이터를 받지
않아도 jsp가 자동으로 받아준다.
 
아래  2문장과 같은 기능이 실행됨.
 String id = request.getParameter("id");
membervo.setId(id);
 
또한 Integer.parseInt(), Boolean.parseBoolean() 를 사용하지 않아도 자동으로 데이터가 변환되서 저장된다.

setProperty 액션 태그의 property 속성에 "*"을 입력하면 
form 의 name 속성에 입력한 이름과 같은 모든 멤버 변수의 setter가 실행된다. 

20 : getRemoteAddr() : 접속자 ip 주소를 받는다.

22 : 저장된 객체(vo)를 전처리 작업을 위해서 Service 클래스로
넘겨 sql 명령을 실행하기 전에 필요한 작업이 있으면 실행한다.

24 : 테이블에 글 1건을 저장했으므로 브라우저에 저장된 글을 출력하기 위해 1페이지 분량의 
글 목록을 얻어오는 페이지(list.jsp)로 넘겨준다

//VO 클래스 => 1건의 글을 저장하는 클래스
//List 클래스 => 1페이지 분량의 글 목록과 페이징 작업에 사용할 8개의 변수를 저장하는 클래스
//Service 클래스 => sql 명령을 실행하기 전에 전처리 작업을 실행하는 클래스
//DAO(Data Access Object) => xml 파일에서 정의한 sql 명령을 실행하는 클래스

-update.jsp-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
  <!--  jstl을 이용해 대입문,제어문,서식,함수를 사용하기 위해 아래의 내용을 코딩한다. -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!-- 대입문,제어문 -->
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><!-- 서식지정 -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><!-- 함수 -->
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<fmt:requestEncoding value="UTF-8"/>
 
    <form action="updateOK.jsp" method="post">
        <table width="600" align="center" border="1" cellpadding="%" cellspacing="0">
            <tr>
                <th colspan="2">삭제할 글 보기</th>
            </tr>
            <tr>
                <td width="100">이름</td>
                <td width="500">
                    <%-- <c:set var="name" value="${fn:replace(vo.name,'<','&lt;')}"/>
                    <c:set var="name" value="${fn:replace(name,'>','&gt;')}"/>
                    ${name} --%>
                    <input type="text" name="name" value="${fn:trim(vo.name)}" readonly="readonly"/>
                </td>
            </tr>
            <tr>
                <td>작성일</td>
                <td>
                    <fmt:formatDate value="${vo.writedate}" pattern="yyyy년 MM월 dd일 E요일" />
                </td>
            </tr>
            <tr>
                <td>메모</td>
                <td>
                    <%-- <c:set var="memo" value="${fn:replace(vo.memo,'<','&lt;')}"/>
                     <c:set var="memo" value="${fn:replace(memo,'>','&gt;')}"/>
                     <c:set var="memo" value="${fn:replace(memo,enter,'</br>')}"/>
                     ${memo} --%>
                     <textarea row="10" cols="65" name="memo" style="resize:none;">${vo.memo}</textarea>    
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <label>
                        비밀번호 <input type="password" name="password"/>
                        <input type="submit" value="수정하기"/>
                        <input type="reset" value="다시쓰기"/>
                        <input type="button" value="돌아가기" onclick="history.back()"/>
                    </label>
                </td>
            </tr>
        </table>
        
        <input type="hidden" name="idx" value="${vo.idx}">
        <input type="hidden" name="currentPage" value="${currentPage}">
        
    </form>
 
</body>
</html>
cs
더보기

-Description

View부분

삭제할 글을 화면에 표시하고 비밀번호를 입력받아 실제로 글을 삭제하는 페이지로 넘겨준다.

18 : form태그를 통해 updateOK.jsp 로 이동,  name,memo,password 그리고 idx,currentPage 들이 전달됨.

60,61 : 삭제할 글번호와 수정 후 돌아갈 페이지 번호를 form에 hidden
으로 저장해서 삭제하는 페이지로 넘겨줘야 한다. 

-updateOK.jsp-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<%@page import="com.koreait.service.UpdateService"%>
<%@page import="com.koreait.service.DeleteService"%>
<%@page import="com.sun.xml.internal.bind.v2.runtime.Name"%>
<%@page import="com.koreait.vo.GuestbookVO"%>
<%@page import="com.koreait.service.SelectService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <% request.setCharacterEncoding("UTF-8");
       int currentPage= Integer.parseInt(request.getParameter("currentPage"));
    %>
<jsp:useBean id="vo" class="com.koreait.vo.GuestbookVO">
    <jsp:setProperty property="*" name="vo"/>
</jsp:useBean>
 
<%
String password=request.getParameter("password");
 
    GuestbookVO original = SelectService.getInstance().selectByIdx(vo.getIdx());
 
    out.println("<script>");
    if( original.getPassword().trim().equals(vo.getPassword() ) ){
        
        UpdateService.getinstance().update(vo);
        
        out.println("alert('"+vo.getIdx()+"번 글 삭제완료."+"')");
    }else{
        out.println("alert('비밀번호가 일치하지 않습니다.')");
    }
    out.println("location.href='list.jsp?currentPage="+currentPage+"'");
    out.println("</script>");
%>
 
</body>
</html>
cs

 

더보기

-Description

16~20 : update.jsp에서 넘어오는 데이터를 받는다. 
VO 클래스에 멤버로 존재하면 useBean으로 받고 나머지는 별도로 받는다.

25 : 삭제할 글의 비밀번호와 삭제하기 위해 입력한 비밀번호를 비교하기 위해
삭제할 글을 테이블에서 얻어온다.

//oracle은 필드의 데이터 타입을 char로 선언하면 필드의 자리수보다
//입력된 문자수가 적을 때 남는 자리가 모두 공백으로 리턴된다.
//해결법 1 . oracle의 필드 타입으로 char대신 varchar2를 사용하면
//남는자리가 공백으로 처리되지 않는다.
//해결법 2.  trim으로 처리해줘야한다.

27~37 : 삭제할 글의 비밀번호와 삭제하기 위해 입력한 비밀번호가 같으면 글을 삭제한다.

-UpdateService.java-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package com.koreait.service;
 
import java.sql.SQLException;
 
import com.ibatis.sqlmap.client.SqlMapClient;
import com.koreait.dao.GuestbookDAO;
import com.koreait.ibatis.MyAppSqlConfig;
import com.koreait.vo.GuestbookVO;
 
public class UpdateService {
    private static UpdateService instance= new UpdateService();
    private UpdateService() {}
    public static UpdateService getinstance() {
        return instance;
    }
    
    public void update(GuestbookVO vo) {
        System.out.println("UpdateService클래스의 update() 메소드");
        SqlMapClient mapper= MyAppSqlConfig.getSqlMapInstance();
        try {
            GuestbookDAO.getinstance().update(mapper,vo);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}
 
cs
더보기

-Description

Singleton 패턴임

updateOK..jsp에서 수정할 정보가 저장된 객체를 넘겨받고 mapper를
얻어온 후 테이블에서 글 1건을 수정하는 DAO클래스의 update sql
명령을 실행.

-delete.jsp-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
  <!--  jstl을 이용해 대입문,제어문,서식,함수를 사용하기 위해 아래의 내용을 코딩한다. -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!-- 대입문,제어문 -->
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><!-- 서식지정 -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><!-- 함수 -->
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<!-- 삭제할 글을 화면에 표시하고 비밀번호를 입력받아 실제로 글을 삭제하는 페이지로 넘겨준다.-->
<fmt:requestEncoding value="UTF-8"/>
 
    <form action="deleteOK.jsp" method="post">
        <table width="600" align="center" border="1" cellpadding="%" cellspacing="0">
            <tr>
                <th colspan="2">삭제할 글 보기</th>
            </tr>
            <tr>
                <td width="100">이름</td>
                <td width="500">
                    <c:set var="name" value="${fn:replace(vo.name,'<','&lt;')}"/>
                    <c:set var="name" value="${fn:replace(name,'>','&gt;')}"/>
                    ${name}
                </td>
            </tr>
            <tr>
                <td>작성일</td>
                <td>
                    <fmt:formatDate value="${vo.writedate}" pattern="yyyy년 MM월 dd일 E요일" />
                </td>
            </tr>
            <tr>
                <td>메모</td>
                <td>
                    <c:set var="memo" value="${fn:replace(vo.memo,'<','&lt;')}"/>
                     <c:set var="memo" value="${fn:replace(memo,'>','&gt;')}"/>
                     <c:set var="memo" value="${fn:replace(memo,enter,'</br>')}"/>
                     ${memo}
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <label>
                        비밀번호 <input type="password" name="password"/>
                        <input type="submit" value="삭제하기"/>
                        <input type="reset" value="다시쓰기"/>
                        <input type="button" value="돌아가기" onclick="history.back()"/>
                    </label>
                </td>
            </tr>
        </table>
        
        <!--  삭제할 글번호와 삭제 후 돌아갈 페이지 번호를 form에 hidden
        으로 저장해서 삭제하는 페이지로 넘겨줘야 한다. -->
        <input type="hidden" name="idx" value="${vo.idx}">
        <input type="hidden" name="currentPage" value="${currentPage}">
        
    </form>
 
</body>
</html>
cs

 

-deleteOK.jsp-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<%@page import="com.koreait.service.DeleteService"%>
<%@page import="com.sun.xml.internal.bind.v2.runtime.Name"%>
<%@page import="com.koreait.vo.GuestbookVO"%>
<%@page import="com.koreait.service.SelectService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <% request.setCharacterEncoding("UTF-8");
    //delete.jsp에서 넘어오는 데이터를 받는다. =>
    //VO 클래스에 멤버로 존재하면 useBean으로 받고 나머지는 별도로 받는다.
    int currentPage= Integer.parseInt(request.getParameter("currentPage"));
    %>
<jsp:useBean id="vo" class="com.koreait.vo.GuestbookVO">
    <jsp:setProperty property="*" name="vo"/>
</jsp:useBean>
 
<%
String password=request.getParameter("password");
//삭제할 글의 비밀번호와 삭제하기 위해 입력한 비밀번호를 비교하기 위해
//삭제할 글을 테이블에서 얻어온다.
    GuestbookVO original = SelectService.getInstance().selectByIdx(vo.getIdx());
    
    //oracle은 필드의 데이터 타입을 char로 선언하면 필드의 자리수보다
    //입력된 문자수가 적을  남는 자리가 모두 공백으로 리턴된다.
    //해결법 1 . oracle의 필드 타입으로 char대신 varchar2를 사용하면
    //남는자리가 공백으로 처리되지 않는다.
    //해결법 2.  trim으로 처리해줘야한다.
 
    out.println("vo.getPassword().length() : "+vo.getPassword().length()+"<br/>" );
    out.println("original.getPassword().length() : "+original.getPassword().length()+"<br/>" );
 
    //삭제할 글의 비밀번호와 삭제하기 위해 입력한 비밀번호가 같으면 글을 삭제한다.
    out.println("<script>");
    if( original.getPassword().trim().equals(vo.getPassword() ) ){
        
        DeleteService.getinstance().delete(vo.getIdx());
        
        out.println("alert('"+vo.getIdx()+"번 글 삭제완료."+"')");
    }else{
        out.println("alert('비밀번호가 일치하지 않습니다.')");
    }
    out.println("location.href='list.jsp?currentPage="+currentPage+"'");
    out.println("</script>");
%>
 
</body>
</html>
cs

-DeleteService.java-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package com.koreait.service;
 
import java.sql.SQLException;
 
import com.ibatis.sqlmap.client.SqlMapClient;
import com.koreait.dao.GuestbookDAO;
import com.koreait.ibatis.MyAppSqlConfig;
 
//Singleton
public class DeleteService {
    private static DeleteService instance= new DeleteService();
    private DeleteService() {}
    public static DeleteService getinstance() {
        return instance;
    }
    
    //deleteOK.jsp에서 삭제할 글번호를 넘겨 받고 mapper를 얻어온 후
    //테이블에서 글 1건을 삭제하는 DAO 클래스의 delete sql 명령을 
    //실행하는 메소드를 실행하는 메소드
    public void delete(int idx) {
        System.out.println("DeleteService클래스의 delete() 메소드");
        SqlMapClient mapper= MyAppSqlConfig.getSqlMapInstance();
        try {
            GuestbookDAO.getinstance().delete(mapper,idx);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}
 
cs

GUI- 검색부분은 업데이트예정

-요약-

 

-마침글-

.

'21년이전 > 국비-JSP+oracle' 카테고리의 다른 글

JSP+Oracle-MVC패턴게시판  (0) 2021.04.16
JSP+Oracle-Freeboard  (0) 2021.04.13
JSP+Oracle - Category  (0) 2021.04.07
728x90

-개발환경-

IDE : Eclipse IDE for Enterprise Java Developers ver-2020-06 (4.16.0)
Tomcat : Tomcat v8.0 Server
JAVA : JAVA8
oracle : oracle 11g

-JDBC 방식으로 Oracle과 연결하기위한 기본설정-

Eclipse의 WEB-INF 의 lib 에 ojdbc6-12.1.0.1-atlassian-hosted.jar 삽입 (드라이버연결)

-DBCP방식으로 Oracle과 연결하기위한 기본설정-

Eclipse의 WEB-INF 의 lib 에 commons-dbcp-1.4.jar 삽입
Eclipse의 WEB-INF 의 lib 에 commons-pool-1.5.7.jar 삽입  (commonsDBCP드라이버 클래스)
Eclipse의 WEB-INF 의 lib 에 ojdbc6-12.1.0.1-atlassian-hosted.jar 삽입 (드라이버연결)
Eclipse의 src 에 pool.jocl 삽입

-tomcatDBCP 설정-

Eclipse의 lib 폴더에 tomcat-dbcp.jar 파일을 복사한다. ( tomcatDBCP 드라이버 클래스)
Eclipse의 META-INF 폴더에 context.xml 파일을 만든다.(데이터베이스 연결정보)
Eclipse의 WEB-INF 의 web.xml 에 필요내용작성

-context.xml-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?xml version="1.0" encoding="UTF-8"?>
<Context>
 
    <!-- 
        name = 커넥션 풀 이름, "jdbc/"  부분은 항상 공통
        type =데이터베이스 연결에 사용하는 자바 클래스 이름, 무조건 "javax.sql.DataSource"  를 사용한다.
        auth = DBCP를 tomcat이 관리한다는 의미로 무조건"Container" 를 사용한다.
        maxActive =데이터베이스 커넥션 풀의 최대 개수 => 최대 연결 허용 개수
        maxIdle = 데이터베이스에 접속을 유지하는 데이터베이스 커넥션 풀의 최대 개수 =>
                     항상 연결을 유지하는 커넥션 풀의 개수
        maxWait = 데이터베이스에 접속하기 위해서 기다리는 최대 시간 => 
                    -1작성시, 기다림없이 바로 접속한다
        username = 사용자 계정 이름
        password =  사용자 비밀 번호
        driverClassName = 데이터베이스 드라이버 클래스 이름
        url = 데이터베이스 접속을 위한 경로
     -->
 
    <Resource
        name = "jdbc/TestDB" 
        type = "javax.sql.DataSource" 
        auth = "Container"
        maxActive = "100" 
        maxIdle = "30" 
        maxWait = "-1"
        username = "Shin" 
        password = "0000" 
        driverClassName = "oracle.jdbc.driver.OracleDriver"
        url = "jdbc:oracle:thin:@localhost:1521:xe"/>
</Context>
cs

-web.xml-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>0331_DBCPTest</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <resource-ref>
      <description>단순설명칸) tomcat DBCP oracle Connection</description>
      <res-ref-name>jdbc/TestDB</res-ref-name>
      <res-type>javax.sql.DataSource</res-type>
      <res-auth>Container</res-auth>
  </resource-ref>
  
</web-app>
cs

-pool.jocl-(데이터베이스 연결정보)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<object class="org.apache.commons.dbcp.PoolableConnectionFactory" 
        xmlns="http://apache.org/xml/xmlns/jakarta/commons/jocl">
 
    <object class="org.apache.commons.dbcp.DriverManagerConnectionFactory">
        <string value="jdbc:oracle:thin:@localhost:1521:xe"/>
       <string value="Shin"/>
        <string value="0000"/>
    </object>
    
    <object class="org.apache.commons.pool.impl.GenericObjectPool">
        <object class="org.apache.commons.pool.PoolableObjectFactory" null="true" />
    </object>
    
    <object class="org.apache.commons.pool.KeyedObjectPoolFactory" null="true"/>
    
    <string null="true"/>
    
    <boolean value="false"/>
    
    <boolean value="true"/>
</object>
 
cs

-DBCP 방식과 JDBC방식의 차이-

JDBC는 데이터베이스 커넥션 인터페이스 이다. 

DBCP는 DB커넥션을 어플리케이션 소스 내에서 제어하면서 DB풀을 가진다.

JNDI는 DB커넥션을 WAS단에서 제어하면서 서버에서 하나의 커넥션 풀을 가진다.

 

-DBUtil.java-(데이터베이스 간편연결 클래스)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
package src.koreait.DbUtil;
 
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
 
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;
 
public class DBUtil {
    
    //mysql에 연결하는 Connection 을 리턴하는 메소드
    public static Connection getMysqlConnection() {
        Connection conn = null;
        try{//드라이버는 WEB-INF/lib 에 저장
            Class.forName("com.mysql.jdbc.Driver");
            String url = "jdbc:mysql://localhost:3306/jspam?useUnicode=true&characterEncoding=UTF-8";
            //?useUnicode=true&characterEncoding=UTF-8  테이블에 한글이 들어올경우 대비해서 설정
            conn = DriverManager.getConnection(url,"root","0000");
            System.out.println("연결 성공 :"+conn+"<br/>");
        }catch(ClassNotFoundException e){
            System.out.println("드라이버 클래스가 존재 하지 않습니다 ");
        }catch(SQLException e){
            System.out.println("데이터베이스 연결 정보가 옳바르지 않습니다 ");
        }
        return conn;
    }
    
    //Oracle에 연결하는 Connection을 리턴하는 메소드
    public static Connection getOracleConnection() {
        Connection conn = null;
        try{
            Class.forName("oracle.jdbc.driver.OracleDriver");//드라이버 로드 ,드라이버이름이 인자
            String url="jdbc:oracle:thin:@localhost:1521:xe";//1521: 포트번호 , xe:개발자테스트용버전
            conn=DriverManager.getConnection(url, "Shin""0000");//오라클 연결 얻기
        } catch (ClassNotFoundException e){
        } catch (SQLException e){
        }
        return conn;
    }
    
    //commonsDBCP를 사용해서 oracle에 연결하는 Connection을 리턴하는 메소드
    public static Connection getCommonsDBCPconnection() {
        Connection conn = null;
        try{
            //Class.forName("com.mysql.jdbc.Driver");//mysql 드라이버
            Class.forName("oracle.jdbc.driver.OracleDriver");//oracle 드라이버
            Class.forName("org.apache.commons.dbcp.PoolingDriver");//commonsDBCP드라이버 클래스를 읽어온다,드라이버 로드 
            String url="jdbc:apache:commons:dbcp:/pool";//데이터베이스 연결정보가 저장된 파일의 경로를 지정한다.
            conn=DriverManager.getConnection(url);//오라클 연결 얻기
            
        } catch (ClassNotFoundException e){
            e.printStackTrace();
        } catch (SQLException e){
            e.printStackTrace();
        }
        return conn;
    }
    
    public static Connection getTomcatDBCPConnection() {
        Connection conn = null;
        try{
            
            Context initContext = new InitialContext();
    /*         Context envContext = (Context)initContext.lookup("java:/com/env");
            DataSource dataSource = (DataSource)envContext.lookup("jdbc/TestDB"); */
            
            //위의 주석으로 처리한 2줄을 tomcat Server 7.0부터 아래와 같이 1줄로 줄여서 사용할 수 있다.
            DataSource dataSource = (DataSource)initContext.lookup("java:/comp/env/jdbc/TestDB");
            
            conn = dataSource.getConnection();
            
        }catch(Exception e){
            e.printStackTrace();
        }
        return conn;
    }
    
    //Connection을 닫아주는 메소드
        public static void close(Connection conn) {
            if(conn!= null) {
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
}
cs

 

-요약-

 

 

-마침글-

.

'21년이전 > 국비-JSP' 카테고리의 다른 글

JSP-파일  (0) 2021.04.14
JSP-파일업로드  (0) 2021.04.14
Oracle-명령어정리  (0) 2021.03.31
Jquery- AJAX 이용  (0) 2021.03.30
Jquery-table  (0) 2021.03.30
728x90
-오라클 접속-
SQL> connect system
※ 실제로 비밀번호를 입력할 때는 문자가 화면에 표시되지 않는다.
Enter Password : 0000
 
-오라클 계정 생성-
SQL> create user Shin identified by 0000;
 
-계정에 권한 설정-
*connect는 접속 권한, resource는 테이블을 만들때 필요한 입력,수정,삭제,검색을 하는 개발자 사용권한
SQL> grant connect, resource to Hong;
 
-오라클 계정 지우기-
* cascade는 사용자와 연관된것 까지 묶어서 처리해주는 명령어
SQL> drop user Shin cascade;
 
-CREATE-
-READ-
-UPDATE-
-DELETE-
 

'21년이전 > 국비-JSP' 카테고리의 다른 글

JSP-파일업로드  (0) 2021.04.14
JSP+Oracle - DBCP , JDBC 연결  (0) 2021.03.31
Jquery- AJAX 이용  (0) 2021.03.30
Jquery-table  (0) 2021.03.30
Jquery-주기적 작업명령어를 이용한 이미지롤링  (0) 2021.03.30
728x90

-개발환경-

IDE : Eclipse IDE for Enterprise Java Developers ver-2020-06 (4.16.0)
Tomcat : Tomcat v8.0 Server
JQuery : jquery-3.6.0.min.js


-설정-

설정에는 두가지 방법이 있는데 , 
1. 인터넷 서비스 제공자로부터 직접 연결하여 데이터를 전송받는 CDN방식(당연히 네트워크필수)
밑 명령줄을 ecilipse의 head태그내에 삽입. 
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous"></script>

2. JQuery 메인 홈페이지에서 js 파일을 다운후 script문 작성.
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>

 

-jquery19_ajax1.html-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
<script type="text/javascript">
    $(document).ready(function(){
        $('#emp_search').click(function(){
            
            
            var empid = $('input[name=empid]').val();
            
            //if(empid>=100 && empid<=999){
            if(!isNaN(empid) && empid.length ===3 ){ 
                
                $.ajax({
                    url: 'emplist.xml',
                    //cache: false,    //사용자 캐시 사용 여부
                    method: 'get',
                    asyn: true
                    dataType: 'xml'
                    success: function(data) { 
                
                        var emdInfo = $(data).find('EMPLOYEE_ID:contains('+empid+')').parent();
                        
                        if($(emdInfo).is('ROW')){
                                $('table input').each(function(index){
                                     $('table input').eq(index).val($(emdInfo).children().eq(index).text());                        
                                });
                        }else{
                            alert(empid+'는 존재하지 않는 사원 번호입니다.');
                            $('input[name=empid]').val('');//텍스트 비우기        
                        }
                        $('input[name=empid]').focus();
                    },
                    error: function(request){ 
                        console.log('ajax 실패~~~~');
                        console.log(request.status + ' : ' + request.statusText);
                    }
                });
                
                //==============================================================
            }else{
                alert('정확한 사원 번호를 입력하세요');
                $('input[name=empid]').val('');//텍스트 비우기
                $('input[name=empid]').focus();
            } //if끝
            
        });//click끝
        
        
    });//onload 끝
</script>
 
<style type="text/css">
    *{   
        margin : 0px;
        padding : 0px;
    }
    body{
        width: 1000px;
        margin: 50px auto;  /*  위아래마진 좌우마진 순서 */
    }
    fieldset{
        width: 300px;
        height: 50px;
        padding: 0px 10px;
    }
    table{
        width: 400px;
        border: 1px solid black;
        padding: 0px 0px;
    }
    table tr:nth-child(odd){
        background: hotpink;
    }
    table tr:nth-child(even){
        background: skyblue;
    }
    input{
        border-radius: 5px;
        height: 25px;
    }
</style>
 
</head>
<body>
 
    <h2>데이터 가져오기</h2>
 
    <fieldset>
        <legend>사원 정보 조회</legend>
        <input type="text" name="empid"/>
        <input id="emp_search" type="button" value="조회"/>
     </fieldset><br/>
     
     <table>
         <tr>
             <th>사원번호</th>
             <td><input type="text" name="idx"/></td>
         </tr>
         <tr>
             <th>이름</th>
             <td><input type="text" name="name"/></td>
         </tr>
         <tr>
             <th>이메일</th>
             <td><input type="text" name="email"/></td>
         </tr>
         <tr>
             <th>내선번호</th>
             <td><input type="text" name="phone"/></td>
         </tr>
         <tr>
             <th>입사일</th>
             <td><input type="text" name="hire"/></td>
         </tr>
     </table>
     
</body>
</html>
cs
 
더보기

-Description

GUI :

10 : 조회버튼이 클릭될시 수행되는 이벤트

13 : 입력받은 사원번호를 empid로 옮긴다

16 : 3자리 숫자만 입력받는다.
//isNaN ( value ) 의 value가 숫자가 아니라면 true, 숫자라면 false
//ps)$.isNumeric( value ) 은 value가 숫자인 경우 true 이외의 경우 false반환. 추천방법

18: ajax 수행

26 : 입력한 사원번호에 해당되는 모든 데이터를 출력해야 하기 때문에
검색한 사원 번호의 부모 요소를 선택한다. ROW 가 선택됨

28 : 검색된 사원 번호에 해당되는 데이터가 있으면 테이블에 출력한다.

28~31 : table 태그의 자손 태그 input 의 갯수 만큼 반복하며 xml파일에서 읽어온
데이터를 채워 넣는다.

42  : ajax 끝

58 : *은 모든 것에적용, 보통 초기화시 이용 

-emplist.xml-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?xml version="1.0" encoding="UTF-8"?>
<ROWSET>
    <ROW>
        <EMPLOYEE_ID>100</EMPLOYEE_ID>
        <LAST_NAME>KING</LAST_NAME>
        <EMAIL>INFO@KINGDOM.COM</EMAIL>
        <PHONE_NUMBER>114</PHONE_NUMBER>
        <HIRE_DATE>2019.03.19 오전 9:36:00</HIRE_DATE>    
    </ROW>
    <ROW>
        <EMPLOYEE_ID>101</EMPLOYEE_ID>
        <LAST_NAME>QUEEN</LAST_NAME>
        <EMAIL>RADIO@HEAVEN.COM</EMAIL>
        <PHONE_NUMBER>503</PHONE_NUMBER>
        <HIRE_DATE>2019.03.19 오전 9:36:00</HIRE_DATE>    
    </ROW>
    <ROW>
        <EMPLOYEE_ID>102</EMPLOYEE_ID>
        <LAST_NAME>BOB</LAST_NAME>
        <EMAIL>BOB@BOB.COM</EMAIL>
        <PHONE_NUMBER>11425</PHONE_NUMBER>
        <HIRE_DATE>2019.03.19 오전 9:36:00</HIRE_DATE>    
    </ROW>
    <ROW>
        <EMPLOYEE_ID>103</EMPLOYEE_ID>
        <LAST_NAME>JACKSON</LAST_NAME>
        <EMAIL>JACKSON@HEAVEN.COM</EMAIL>
        <PHONE_NUMBER>114</PHONE_NUMBER>
        <HIRE_DATE>2019.03.19 오전 9:36:00</HIRE_DATE>    
    </ROW>
</ROWSET>
cs

 

 

-요약-

//===JQuery Ajax ===============================================
//ajax = AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록
//XMLHttpRequest객체를 통해 서버에 request한다. 
//이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에
//그만큼의 자원과 시간을 아낄 수 있다.

 

ajax 사용법
$.ajax({
     url: 'emplist.xml', //호출할 페이지 주소 or 요청 or 읽어올 xml 파일 이름
     cache: false,//사용자 캐시 사용 여부
     method: 'get',//서버에 데이터를 전송하는 방식
     asyn: true, // 비동기 방식(true) 혹은 동기방식을 사용(false는 동기 방식을 의미)
     dataType: 'xml', //전송받는 데이터 타입을 적는다.(xml,json,html,script)
     data:{ //서버로 전송할 데이터
               'key':'value'
     },
     success: function(data) { //ajax가 성공했을 때 실행할 콜백 함수
     //함수의 인수 data에 응답받은 데이터가 저장된다.

     },
     error: function(request){ //ajax가 실패했을 때 실행할 콜백 함수
     //함수의 인수 request에 응답받은 데이터가 저장된다.
     }
});

 

-마침글-

단순문법공부는 boring하다..

인용

 

'21년이전 > 국비-JSP' 카테고리의 다른 글

JSP+Oracle - DBCP , JDBC 연결  (0) 2021.03.31
Oracle-명령어정리  (0) 2021.03.31
Jquery-table  (0) 2021.03.30
Jquery-주기적 작업명령어를 이용한 이미지롤링  (0) 2021.03.30
Jquery-태그삭제  (0) 2021.03.30
728x90

-개발환경-

IDE : Eclipse IDE for Enterprise Java Developers ver-2020-06 (4.16.0)
Tomcat : Tomcat v8.0 Server
JQuery : jquery-3.6.0.min.js


-설정-

설정에는 두가지 방법이 있는데 , 
1. 인터넷 서비스 제공자로부터 직접 연결하여 데이터를 전송받는 CDN방식(당연히 네트워크필수)
밑 명령줄을 ecilipse의 head태그내에 삽입. 
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous"></script>

2. JQuery 메인 홈페이지에서 js 파일을 다운후 script문 작성.
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>

 

-jquery18_table.html-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
 
    $(document).ready(function(){
        $('#btn1').click(function(){
            //var html ='<tr><td>방법1</td><td>방법</td><td>방법</td><td>방법</td></tr>';
            var str = '내장된 표현식'
            var html =`<tr>
                            <td>${str}</td>
                            <td>방법1</td>
                            <td>방법1</td>
                            <td>방법1</td>
                    </tr>`;
            $('tbody').append(html);
        });
        
        $('#btn2').click(function(){
            var $tr = $('<tr>',{});//태그기억하는 Jquery변수는 앞에 $ 붙임.
            var $td1 = $('<td>',{text:'방법2'});
            var $td2 = $('<td>');
            var $td3 = $('<td>');
            var $td4 = $('<td>');    
        
            $('tbody').append($td1);
            $('tbody').append($td2);
            $('tbody').append($td3);
            $('tbody').append($td4);
            $('tbody').append($tr);
        });
    });
 
 
</script>
</head>
<body>
 
    <table border="1">
        <!-- colgroup 태그로 열 설정을 미리 할 수 있다. -->
        <colgroup>
            <col width="200"/>
            <col width="200"/>
            <col width="200"/>
            <col width="200"/>
        </colgroup>
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
    </table><br/>
    
    <button type="button" id='btn1'>방법1</button>
    <button type="button" id='btn2'>방법2</button>
 
</body>
</html>
cs

 

 
더보기

-Description

GUI :

13~18 : Template literals : 템플릿 리터럴은 여러 줄로 이뤄진 문자열을 허용하는 
문자열 리터럴이다 ,
내장된 표현식은 '${' 와 '}' 사이에 변수 이름을 입력하면 변수에 저장된
데이터가 템플릿 리터럴에 삽입된다.

23~27 : 태그기억하는 Jquery변수는 앞에 $ 붙임.
$('<tag>')는 태그를 만든다. 태그를 만들고 태그에 데이터를 넣어주려면 
2번째 인수로 {}로 묶어서 데이터를 넣어주면 된다.

방법2 버튼 클릭후 GUI

 

-요약-

 

 

-마침글-

단순문법공부는 boring하다..

인용

 

'21년이전 > 국비-JSP' 카테고리의 다른 글

Oracle-명령어정리  (0) 2021.03.31
Jquery- AJAX 이용  (0) 2021.03.30
Jquery-주기적 작업명령어를 이용한 이미지롤링  (0) 2021.03.30
Jquery-태그삭제  (0) 2021.03.30
Jquery-태그추가2  (0) 2021.03.30
728x90

-개발환경-

IDE : Eclipse IDE for Enterprise Java Developers ver-2020-06 (4.16.0)
Tomcat : Tomcat v8.0 Server
JQuery : jquery-3.6.0.min.js


-설정-

설정에는 두가지 방법이 있는데 , 
1. 인터넷 서비스 제공자로부터 직접 연결하여 데이터를 전송받는 CDN방식(당연히 네트워크필수)
밑 명령줄을 ecilipse의 head태그내에 삽입. 
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous"></script>

2. JQuery 메인 홈페이지에서 js 파일을 다운후 script문 작성.
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>

 

-jquery17_이미지롤링.html-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
 
 $(document).ready(function(){
     
     var count =0 ;
     setInterval(function(){
         $('.active').first().appendTo($('#menu'));//id=menu 내부의  마지막요소로 들어간다.
     }
     ,1000
             );  // 1초 , ms 단위
     
     
     
     
    $('button').click(function(){
        if($(this).text()=='start')
            $(this).text('stop');
        else
            $(this).text('start');
        $('img').toggleClass('active');
    });
 });
</script>
 
<style>
 
    body{
        margin:0;
    }
    img{
        width:150px;
        height:150px;
        float: left;  /* 부유속성, 여기선 이미지태그가 글 왼쪽위로 뜨게됨 */
    }
    .sel{
        width: 140px;
        height:140px;
        border: 5px solid tomato;
        position: absolute;
        left: 300px;
    }
    button{
        width: 150px;
        height: 50px;
        font-size: 20pt;
        margin-left: 300px;
    }
    #menubox{
        position: relative;
    }
    #menu{
        overflow: auto; /* auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정됩니다.( 필요에 따라 가로, 세로 별도로 추가될 수도 있습니다.) */
    }
 
</style>
 
</head>
<body>
 
    <h2>점심 식사 메뉴 뽑기</h2>
 
    <div id="menubox">
        <div class="sel"></div>
        <div id="menu">
            <img alt="떡볶이" src="./images/ddbg.jpg"/>
            <img alt="돈까스" src="./images/don.jpg"/>
            <img alt="햄버거" src="./images/hamburg.jpg"/>
            <img alt="라면" src="./images/lamyun.jpg"/>
            <img alt="막창" src="./images/makchang.jpg"/>
        </div>
        <button type="button">start</button>
    </div>
</body>
</html>
cs
더보기

-Description

GUI :

13 :  지정된 시간 간격으로 함수를 반복해서 실행한다 ,
메뉴의 첫 번재 이미지를 메뉴의 마지막 이미지로 이동시킨다.

14 : appendTo() : 선택된 요소를 인자 내부의 마지막에 추가한다.
=> append()메소드와 유사하지만, 선택한요소가 appendTo 인자 내부의 마지막 요소로 들어감

16 : 1초 단위로 반복수행함을 의미

22: start 버튼이 클릭되면 버튼위의 문자열을 stop으로 변경한 후 이미지 롤링을 시작한다.

27 : start 버튼이 클릭되면 active라는 class를 추가하고 이미지 롤링을 시작.
stop 버튼이 클릭되면 active라는 class를 제거하고 이미지 롤링을 중지한다.

40 : float 속성을 left로 줌. 즉 img 태그가 왼쪽 위로 뜨면서 텍스트는 오른쪽에 위치하게 됨

59 : overflow: auto; /* auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정됩니다.( 필요에 따라 가로, 세로 별도로 추가될 수도 있습니다.) */

 

-요약-

//자바스크립트로 주기적인 작업을 실행하기 위해서 setInterval()함수와 setTimeout()함수를 사용한다.
// 두가지는 비슷하지만 어떤 차이점을 가진다.
//setTimeout(함수,시간) : 지정된 시간이 지나면 함수를 실행한다.
//clearTimeout() : setTimeout()함수를 중지시킨다.

//setInterval(함수,시간) : 지정된 시간 간격으로 함수를 반복해서 실행한다.
//clearInterval() : setInterval() 함수의 실행을 중지시킨다.
//clearTimeout(),clearInterval()함수는 실행중인 작업을 중지시키는 것이 아니고 다음 작업 스케줄을 중지시킨다.

 

-마침글-

단순문법공부는 boring하다..

인용

 

'21년이전 > 국비-JSP' 카테고리의 다른 글

Jquery- AJAX 이용  (0) 2021.03.30
Jquery-table  (0) 2021.03.30
Jquery-태그삭제  (0) 2021.03.30
Jquery-태그추가2  (0) 2021.03.30
MergeInterval  (0) 2021.03.29
728x90

-개발환경-

IDE : Eclipse IDE for Enterprise Java Developers ver-2020-06 (4.16.0)
Tomcat : Tomcat v8.0 Server
JQuery : jquery-3.6.0.min.js


-설정-

설정에는 두가지 방법이 있는데 , 
1. 인터넷 서비스 제공자로부터 직접 연결하여 데이터를 전송받는 CDN방식(당연히 네트워크필수)
밑 명령줄을 ecilipse의 head태그내에 삽입. 
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous"></script>

2. JQuery 메인 홈페이지에서 js 파일을 다운후 script문 작성.
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>

 

-jquery16_요소삭제.html-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
 
    $(document).ready(function(){
        $('p:eq(0)').click(function(){
            let remove= $(this).remove(); // <p>지우기 - remove</p> 가 사라짐
            console.log(remove);
            $('h2').append(remove);
        });
        $('p:eq(1)').click(function(){
            let detach= $(this).detach(); // <p>잘라내기 - detach</p> 가 사라짐
            console.log(detach);
            $('h2').append(detach);
        });
        $('p:eq(2)').click(function(){
            $(this).empty();// <p> 태그 내부가 비워짐
        });
        $('p:eq(3)').click(function(){
            $(this).unwrap();
        });
    });
 
</script>
 
</head>
<body>
 
    <h2>요소 제거하기</h2>
 
    <div>
        <p>지우기 - remove</p>
        <p>잘라내기 - detach</p>
        <p>비우기 - empty</p>
        <p>부모 지우기 - unwrap</p>
    </div>
 
</body>
</html>
cs
더보기

-Description

GUI :

11 : remove() : 선택된 요소를 DOM 트리에서 삭제한다.
삭제된 요소와 연관된 jquery데이터나 이벤트도 같이 삭제된다.
13 : h2태그 뒤에 삭제한 remove가 추가된다.
16 : detach() : 선택된 요소를 DOM 트리에서 삭제한다.
삭제된 요소와 연관된 jquery데이터 그리고 이벤트는 유지된다.
21 : empty() : 선택된 요소의 모든 자식 요소를 삭제한다.
24 :  unwrap() : 선택된 요소의 부모 요소를 삭제한다. 
부모 요소만 삭제되고 자식 요소는 삭제 되지 않는다.

 

-요약-

JAVASCRIPT

-alert-

alert내 개행을 원한다면 \\n을 사용한다

 

-마침글-

단순문법공부는 boring하다..

인용

 

'21년이전 > 국비-JSP' 카테고리의 다른 글

Jquery-table  (0) 2021.03.30
Jquery-주기적 작업명령어를 이용한 이미지롤링  (0) 2021.03.30
Jquery-태그추가2  (0) 2021.03.30
MergeInterval  (0) 2021.03.29
Jquery-요소(태그)추가  (0) 2021.03.29
728x90

-개발환경-

IDE : Eclipse IDE for Enterprise Java Developers ver-2020-06 (4.16.0)
Tomcat : Tomcat v8.0 Server
JQuery : jquery-3.6.0.min.js


-설정-

설정에는 두가지 방법이 있는데 , 
1. 인터넷 서비스 제공자로부터 직접 연결하여 데이터를 전송받는 CDN방식(당연히 네트워크필수)
밑 명령줄을 ecilipse의 head태그내에 삽입. 
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous"></script>

2. JQuery 메인 홈페이지에서 js 파일을 다운후 script문 작성.
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>

 

-jquery15_요소추가2.html-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<style type="text/css">
 
    div{
        border: 1px solid red;
    }
 
</style>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
 
    $(document).ready(function(){
        $('button:eq(0)').click(function(){
            $('#base').after('<div>after() 메소드로 추가한 요소</div>');
        });
        
        $('button:eq(1)').click(function(){
            $('<div>insertAfter() 메소드로 추가한 요소</div>').insertAfter('#base');
        });
        
        $('button:eq(2)').click(function(){
            $('#base').before('<div>before() 메소드로 추가한 요소</div>');
        });
        
        $('button:eq(3)').click(function(){
            $('<div>insertBefore() 메소드로 추가한 요소</div>').insertBefore('#base');
        });
        
    });
 
</script>
</head>
<body>
 
    <button type="button">after</button>
    <button type="button">insertAfter</button>
    <button type="button">before</button>
    <button type="button">insertBefore</button>
 
    <div id="base">
        <p>외부 삽입</p>
    </div>
 
 
</body>
</html>
cs
더보기

-Description

GUI :

20 : after() : 선택된 요소 뒤에 새로운 요소를 추가한다.

24 : insertAfter() : 선택된 요소 뒤에 새로운 요소를 추가한다.

28 : before() : 선택된 요소 앞에 새로운 요소를 추가한다.

32 : insertBefore() : 선택된 요소 앞에 새로운 요소를 추가한다.

 

-요약-

 

 

-마침글-

단순문법공부는 boring하다..

인용

 

'21년이전 > 국비-JSP' 카테고리의 다른 글

Jquery-주기적 작업명령어를 이용한 이미지롤링  (0) 2021.03.30
Jquery-태그삭제  (0) 2021.03.30
MergeInterval  (0) 2021.03.29
Jquery-요소(태그)추가  (0) 2021.03.29
Jquery-Plugin 적용  (0) 2021.03.29
728x90

-개발환경-

IDE : Eclipse IDE for Java Developers Version: 2020-03 (4.15.0)

공부 자료 :  www.inflearn.com/course/%EC%BD%94%EB%94%A9%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%9E%90%EB%B0%94/lecture/22652

-문제-

인터벌들의 모음이 주어질때 , 인터벌의 오버래핑되는 모든 부분을 통합해라.
ex)
Input: [[1,3],[2,6],[8,10],[15,18]]
Output: [[1,6],[8,10],[15,18]]

 

-접근법-

접근법 
1. 한 인터벌을 (start,end)로 명명할 때 , start를 기준으로 오름차순 정렬을 수행
2. before이라는 인터벌을 담을 객체를 생성후 정렬된 인터벌중 가장 앞 값을 집어 넣는다.
3. 정렬된 인터벌모임을 반복문으로 돌린다. 반복문 내용으로,
case1) before.end >= current.start 일시 ,
before의 start와 end를 갱신 .
 (이와같이 명료히 할 수 있는 이유는 초기에 정렬을 해주었기에)
case2) before.end < current.start 일시 ,
before을 result에 저장.
현재의 current를 before로 만듬
4. for문 종료 이후 , before를 result에 저장.

 

그림으로 나타낸 절차는 아래와 같다.

 

 

-MergeInterval.java-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
package codingTest;
 
import java.util.ArrayList;
import java.util.Collections;
import java.util.Comparator;
import java.util.List;
 
class Interval_{
    int start;
    int end;
    Interval_(){start=0;end=0;}
    Interval_(int s,int e){start=s;end=e;}
    
}
 
public class MergeInterval {
 
    public static void main(String[] args) {
        //TestCase
        Interval_ in2=new Interval_(1,3);
        Interval_ in1= new Interval_(2,6);
        Interval_ in3= new Interval_(8,10);
        Interval_ in4= new Interval_(15,18);
        
        List<Interval_> intervals= new ArrayList<>();
        intervals.add(in1);
        intervals.add(in2);
        intervals.add(in3);
        intervals.add(in4);
 
        //Procedure
        MergeInterval a= new MergeInterval();
        List<Interval_> list= a.merge(intervals);  
        //OutPut
        System.out.println("==========================================");
        a.print(list);
    }
    public List<Interval_> merge(List<Interval_> intervals){
        if (intervals.isEmpty()) return intervals;
        //1.ds
        List<Interval_> result= new ArrayList<>();
        
        //sort
        print(intervals);//test
        Collections.sort(intervals, (a,b)->a.start-b.start);//람다표현식 오름차순
        //Collections.sort(intervals,comp ); //기존방식
        System.out.println("==========================================");
        print(intervals);//test
        
        //2
        Interval_ before = intervals.get(0);//[1,3]
        for(int i=1;i<intervals.size();i++) {
            Interval_ current= intervals.get(i);
            if(before.end >= current.start) {
                before.end=Math.max(before.end,current.end);
            }else {
                result.add(before);
                before=current;
            }
        }
        
        if(!result.contains(before)) { //해당 if 문은 없어도 무방해보임, 단 내부 명령어는 쓰여져야 함
            result.add(before);
        }
        
        return result;
    }
    
    void print(List<Interval_> list) {
        for(int i=0;i<list.size();i++) {
            Interval_ in =list.get(i);
            System.out.println(in.start +" "+in.end);
            
        }
    }
    Comparator comp = new Comparator<Interval_>() {
        public int compare(Interval_ a,Interval_ b) {
            return a.start-b.start;
        }
    };
}
 
cs
더보기

-Description

 

25 : TestCase 객체들을 담을 ArrayList인 intervals을 생성한다.
33 : 구현한 merge함수를 이용하여 문제를 해결한후 결과값 반환
39 : input이 없을 경우 처리
41 : 결과를 담을 ArrayList 형 result 생성
45 : 람다표현식으로  intervals를 start을 기준으로 하여 오름차순으로 정렬
51~64 : 접근법에서 설명한 내용이다.
66 : 결과 result 반환
76 : 람다식을 이용한 정렬을 수행하였으므로 , 이 함수는 이용하지 않았다.

결과화면

-추가개념-

List , ArrayList , Collections , Lambda 표현식

 

List는 인터페이스 그리고,  ArrayList 및 ,LinkedList,Stack,Vector 는 클래스로 List를 구현.

//List 인터페이스
     //순서 o  , 중복 허용  ex)대기자 명단
     //ex)
          //ArrayList,LinkedList,Stack,Vector등
     //메소드 (자세 한건 JAVA8 API 문서볼것)
          //add -추가
          // get,set  - 얻어오기, 저장하기.
          //indexOf - 검색  (왼쪽부터 오른쪽으로)
          //lastIndexOf - 검색 (오른쪽부터 왼쪽으로)
          //sort  -정렬
          //subList - from부터 to 까지 뽑아옴

          //int size() - size반환

          //isEmpty - 비어있는지 확인

          //boolean contains(Object o) - 지정된 객체가 존재하는지 확인
     //ArrayList - 동기화 처리가 안되어 있다. -
          //vector는 동기화 처리가 되어있다.
          //데이터의 저장공간으로 배열을 사용한다. ( Object 배열 )
          //메소드
               //생성자
                    //ArrayList()
                    //ArrayList(Collection c)
                    //ArrayList(int initialCapacity) -배열의 길이 넣어줌-
               //boolean add(Object o)
               //void add(int index,Object element)
               //boolean addAll(Collection c)
               //boolean addAll(int index , Collection c)
               //boolean remove(Object o)
               //Object remove(int index)
               //boolean removeAll(Collection c)
               //void clear() - 모든객체삭제
               //int indexOf(Object o) - 찾으면 인덱스반환 , 못찾으면 -1 반환
               //int lastIndexOf(Object o) - 오른쪽부터 찾음
               //boolean contains(Object o) - 지정된 객체가 존재하는지 확인
               //Object get(int index) - 객체 읽기
               //Object set(int index, Object element) - 수정
               //List subList(int fromIndex,int toIndex) - from부터 to 전까지 객체들을 뽑아서 새로운 리스트를 반환
               //Object[] toArray()  - ArrayList가 가지고 있는 객체 배열을 반환
               //boolean isEmpty() - 비어있는지 확인
               //void trimToSize() - 빈공간 제거
               //int size()  -ArrayList에 저장된 객체의 갯수를 반환

 

Collections 는 정적메소드들의 집합으로 구성된 클래스이다.
//여기에는 컬렉션에서 작동하는 다형성 알고리즘이 포함되어 있다.
1. reverse() 메서드 - 뒤집기
2. sort() 메서드 - 정렬하기
3. copy() 메서드 - 복사본만들기
4. shuffle 메서드 - 무작위로 섞기

 

-람다(Lambda)표현식-
람다표현식은 함수형 인터페이스를 통해서 사용할수 있다.
함수형 인터페이스는 추상 메소드가 한개뿐인 메소드이다..
자바에서는 @FunctionalInterface 를 인터페이스구문위에 적어서 구분한다고 한다..
람다표현식은 , 파라미터,화살표, 바디(구현부분) 3가지로 나뉜다.
람다 표현식은
1. () -{}
2. () ->"history"
3. () -> {return "history";}
4. 파라미터->{return "history"+a;}
5. (파라미터,파라미터)->"history" 
바디(구현부분)에는 return문에 적힐 문장이 온다. return은 생략가능..
파라미터 타입도 생략이 가능..
 return 을 적어줄시 {} 을 써야하며 ; 도 붙여줘야한다..

 

 

-마침글-

 

 

인용

'21년이전 > 국비-JSP' 카테고리의 다른 글

Jquery-태그삭제  (0) 2021.03.30
Jquery-태그추가2  (0) 2021.03.30
Jquery-요소(태그)추가  (0) 2021.03.29
Jquery-Plugin 적용  (0) 2021.03.29
Jquery- class 추가 및 제거  (0) 2021.03.29
728x90

-개발환경-

IDE : Eclipse IDE for Enterprise Java Developers ver-2020-06 (4.16.0)
Tomcat : Tomcat v8.0 Server
JQuery : jquery-3.6.0.min.js


-설정-

설정에는 두가지 방법이 있는데 , 
1. 인터넷 서비스 제공자로부터 직접 연결하여 데이터를 전송받는 CDN방식(당연히 네트워크필수)
밑 명령줄을 ecilipse의 head태그내에 삽입. 
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous"></script>

2. JQuery 메인 홈페이지에서 js 파일을 다운후 script문 작성.
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>

 

-jquery14_요소추가.html-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
 
 div{
     border: 1px solid blue;
     margin-top: 10px;
 }
 .prepend{
     border:1px solid red;
 }
 .append{
     border:1px solid green;
 }
 
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
 
    $(document).ready(function(){
        $('button:eq(0)').click(function(){
        //    $('<tag>') : 인수로 지정된 태그를 만든다.    
        $('div').prepend($('<p>').addClass('prepend').text('prepend')); 
        });
        
        $('button:eq(1)').click(function(){
            $('div').append($('div>p:first').addClass('append'));
        });
        
        
        $('button:eq(2)').click(function(){
            $('div').html('<marquee>html 요소를 변경한다</marquee>');
        });
        
        $('button:eq(3)').click(function(){
            $('div').text('<marquee>html 요소를 변경한다</marquee>');
        });
        
    });
 
</script>
 
</head>
<body>
    <button type="button">prepend</button>
    <button type="button">append</button>
    <button type="button">html</button>
    <button type="button">text</button>
    
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>내부 삽입</p>
    </div>
</body>
</html>
cs
더보기

-Description

GUI :

23: onload 수행
26 : prepend() :  인수로 지정된 만들 태그를 선택된 요소의 하위 레밸의 첫번재 요소에 추가한다.
30 : append() : 인수로 지정된 만들 태그를 선택된 요소의 하위 레밸의 마지막 요소에 추가한다.
35 : html() 은 태그를 적용시켜준다. , marquee는 글자를 이동하는 효과를 준다.
39 : text()는 태그를 적용시키지 못한다.

 

-요약-

 

 

-마침글-

단순문법공부는 boring하다..

인용

 

'21년이전 > 국비-JSP' 카테고리의 다른 글

Jquery-태그추가2  (0) 2021.03.30
MergeInterval  (0) 2021.03.29
Jquery-Plugin 적용  (0) 2021.03.29
Jquery- class 추가 및 제거  (0) 2021.03.29
Jquery-EasingFlug 이용해보기  (0) 2021.03.29

+ Recent posts