jsp에서 <a>태그에 href값을 주면 get방식으로 넘어간다. 

하지만 post로 넘기고 싶다면?

=> onClick이벤트로 자바스크립트 함수를 추가하고 그 함수안에서 post로 넘기면 된다.

 

 

1. 컨트롤러로 넘기는 값이 없을때

(1) JSP (form 태그로 안감싸도 된다.)

1
<a href="javascript:void(0)" onClick="javascript:goPost()">클릭시 POST로 페이지 </a>
 cs

(2) Javascript 함수 (method는 post, 컨트롤러 주소는 goPost.do)

1
2
3
4
5
6
7
function goPost(){
    let f = document.createElement('form');
    f.setAttribute('method', 'post');
    f.setAttribute('action', 'goPost.do');
    document.body.appendChild(f);
    f.submit();
}
 cs

 

(3)Controller (goPost.do로 호출되고 post.jsp라는 페이지로 이동한다)

1
2
3
4
@PostMapping("goPost.do")
public String go_post(){
    return "post";
}
 cs

 

전달하는 값은 없지만 굳이 PostMapping으로 페이지 이동을 해야할때 사용 

 

 

2. 컨트롤러로 넘기는 값이 있을때

(1) JSP (jstl 태그의 값을 인수로 넘겨준다고 쳤을때)

1
<a href="javascript:listView('${list.userid}')">유저아이디</a>
 cs

이전에는 보통 다음과 같이 getMapping으로 넘어가도록 했었다.

1
<a href="getView.do?userid=${list.userid}">유저아</a>
 cs

 

 

(2) Javascript 함수

hidden 타입의 input태그를 만들어서 그 value값에 전달하고자 하는 인수를 집어넣고, userid란 이름으로 넘기겠다는 뜻이다.

method는 post, 컨트롤러 주소는 view.do이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function listView(userid){
    let f = document.createElement('form');
    
    let obj;
    obj = document.createElement('input');
    obj.setAttribute('type', 'hidden');
    obj.setAttribute('name', 'userid');
    obj.setAttribute('value', userid);
    
    f.appendChild(obj);
    f.setAttribute('method', 'post');
    f.setAttribute('action', 'view.do');
    document.body.appendChild(f);
    f.submit();
}
 cs

 

(3)Controller

1
2
3
4
5
6
@PostMapping("view.do")
public String getView(String userid, Model model){
    User userView = userService.view(userid);
    model.addAttribute("userView", userView);
    return "view";
}
 cs

 

 

저작자표시 비영리 변경금지

'Learning > HTML&JavaScript' 카테고리의 다른 글

과제-반응형 웹 만들고 이력서와 회원가입 페이지 연결하기  (0) 2020.08.04
반응형 웹 디자인  (0) 2020.08.04
DOM, BOM  (0) 2020.08.04
자바스크립트 함수 2  (0) 2020.08.03
자바스크립트 함수 1  (0) 2020.07.31

메이븐 기반 웹프로젝트

게시판에 파일 입력하기

 

  • pom.xml

⇒ MultipartResolver를 사용하기 위해 Apache Commons FileUpload를 pom.xml 디펜던시에 추가

1
2
3
4
5
6
<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>
 cs

 

 

  • 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
        <!-- 파일업로드는 multipart/form-data -->
        <form action="" id="frm" method="post" enctype="multipart/form-data">
            <br/><br/>
            <div class="form-group">
                제목
                <input type="text" class="form-control" id="title" name="title">
                <div id="title_check"></div>
            </div>
            
            <div class="form-group">
                파일 
                <input type="file" class="form-control" id="file" name="file">
            </div>
            
            <div class="form-group">
                내용 
                <textarea class="form-control" rows="10" id="content" name="content"></textarea>
                <div id="content_check"></div>
            </div>
            
            <div class="text-center">
                <a id="sendBtn" class="btn btn-primary">작성</a>
                <a id="resetBtn" class="btn btn-danger">취소</a>
            </div>
        </form>
 cs

 

 

  • javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//작성버튼을 눌렀을 경우
    $("#sendBtn").click(function(){
        var formData = new FormData($("#frm")[0]);
        
        $.ajax({
            url: "boardInsert.do",
            type: "post",
            enctype: "multipart/form-data",
            data: formData,
            processData: false,
            contentType: false,
            success: function(val){
                if(val == 1){
                    alert("글을 입력하였습니다."); location.href="/mvnschool/board.do";
                }else{
                    alert("전송 실패");
                }
            },
            error: function(e){
                alert(e);
            }
        })//ajax
    }); //sendBtn
 cs

 

 

 

  • Controller

⇒ 컨트롤러에서 부를때 그냥 HttpServletRequest로 부르지말고 MultipartHttpServletRequest로 불러야함

⇒ MultipartFile 객체를 생성하여 MultipartHttpServletRequest의 getFile메소드로 불러온 파일을 저장

⇒ 저장할 경로 지정

⇒ 가져온 원본파일의 이름에 중복방지를 위해 time을 추가하고 지정한 경로에 파일 생성

⇒ db에는 그 파일의 이름이 저장됨

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
    @RequestMapping(value="/boardInsert.do", method = RequestMethod.POST)
    @ResponseBody
    public int boardInsert(HttpServletRequest request, MultipartHttpServletRequest multiRequest,
            @ModelAttribute Board board) throws IllegalStateException, IOException{
        //글쓴이 정보 생성
        HttpSession session = request.getSession();
        String userno = (String)session.getAttribute("userno");
        User user = userDAO.userView(userno);
        String name = user.getName();
 
        //board에 글쓴이 정보를 세팅
        board.setUserno(userno);
        board.setName(name);
        
        MultipartFile mf = null;
        //파일을 업로드 하지 않는다면 fileupload 컬럼에는 그냥 null이 입력됨
        if(multiRequest.getFile("file").getSize() != 0){
            mf = multiRequest.getFile("file"); //input file로 넘어온 값
            
            //경로 지정
            String path = "D:\\kj\\mvnschool\\webapp\\WEB-INF\\upload";
            File fileDir = new File(path);
            if(!fileDir.exists()){
                fileDir.mkdirs();
            }
 
            //중복방지를 위해 time 추가
            long time = System.currentTimeMillis();
            String originFileName = mf.getOriginalFilename(); //원본 파일명
            String saveFileName = String.format("%d_%s", time, originFileName); //저장 파일명
            
            //파일 생성
            mf.transferTo(new File(path, saveFileName)); 
 
            board.setFileupload(saveFileName);
        }
        
        int result = boardDAO.boardInsert(board);
        
        return result;
    }
 cs

 

 

  • dao
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
//게시판 업로드
    public int boardInsert(Board board){
        Connection conn = null;
        PreparedStatement pstmt = null;
        int result = 0;
        
        try {
            conn = getConnection();
            String sql = "insert into board "
                    + "(bnum, userno, name, title, content, hit, regdate, replycnt, fileupload) "
                    + "values('BOA' || board_seq.nextval, ?, ?, ?, ?, 0, sysdate, 0, ?)";
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, board.getUserno());
            pstmt.setString(2, board.getName());
            pstmt.setString(3, board.getTitle());
            pstmt.setString(4, board.getContent());
            pstmt.setString(5, board.getFileupload());
            result = pstmt.executeUpdate();
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            closeConnection(conn, pstmt);
        }
        return result;
    }
 cs
 
 
  
저작자표시 비영리 변경금지

'Learning > JSP' 카테고리의 다른 글

checkbox에서 유저의 메일주소를 가져온 뒤 자바메일 발송하기 (javax.mail)  (0) 2021.03.16
Join으로 가져온 데이터들을 테이블에 뿌리기  (0) 2021.03.10
안드로이드 어플 만들기 프로젝트 (Moodtracker)  (0) 2020.10.30
포털사이트에서 필요한 정보 출력하기 (jsoup select)  (0) 2020.08.21
주소록 만들기2  (0) 2020.08.21

1. 메이븐 기반 프로젝트이므로 pom.xml에 javax.mail 디펜던시 추가

 

1
2
3
4
5
6
<!-- https://mvnrepository.com/artifact/javax.mail/mail -->
<dependency>
    <groupId>javax.mail</groupId>
    <artifactId>mail</artifactId>
    <version>1.4.7</version>
</dependency>
 cs

 

 

2. selectbox 선택부분

  • 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
<table class="table table-hover">
            <colgroup>
            <col width="5%"/>
            <col width="5%"/>
            <col width="10%"/>
            <col width="10%"/>
            <col width="40%"/>
            <col width="10%"/>
            <col width="20%"/>
        </colgroup>
        <thead>
            <tr>
                <th scope="col"><input type="checkbox" name="select_all" id="select_all" value="select_all"></th>
                <th scope="col">No.</th>
                <th scope="col">이름</th>
                <th scope="col">아이디</th>
                <th scope="col">주소</th>
                <th scope="col">전화번호</th>
                <th scope="col">이메일</th>
            </tr>
        </thead>
        <tbody>
                <c:forEach items="${list}" var="list" varStatus="st">
                    <tr>
                        <td><input type="checkbox" name="select_tch" id="select_tch" value="${list.userno}"></td>
                        <td>${rowNo-st.index}</td>
                        <td>${list.name}</td>
                        <td>${list.userid}</td>
                        <td>${list.address}</td>
                        <td>${list.phone}</td>
                        <td>${list.email}</td>
                    </tr>
                </c:forEach>
        </tbody>
</table>
 cs

 

  • javascript

맨 윗줄 checkbox를 체크하면 전체선택이 되도록, 한번더 누르면 전체선택이 해제되도록 설정

 

1
2
3
4
5
6
7
8
//전체선택 구현 (id=select_all을 누르면 모든 checkbox 타입의 input box의 checked를 true로 바꿔라)
    $("#select_all").on("click",function(){
        if($("input:checkbox[id = 'select_all']").prop("checked")){
            $("input[type=checkbox]:not(:disabled)").prop("checked", true);
        }else{
            $("input[type=checkbox]:not(:disabled)").prop("checked", false);
        }
    });
 cs

 

교사 승인 버튼을 눌렀을 경우 체크박스의 value (user의 userno, email값)를 배열에 담고 json형태로 바꿔서 넘기기

 

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
//교사 승인 버튼을 눌렀을경우 체크박스의 value(user의 userno), email 값을 배열에 담고 json형태로 바꿔서 넘긴다.
    $("#tchProveBtn").click(function(){
        var checkbox = $("input[name='select_tch']:checked");
        var jarr = [];
        
        $(checkbox).each(function(i){
            var tr = checkbox.parent().parent().eq(i);
            var td = tr.children();
            
            var userno = $(this).val(); //체크박스의 value값
            var email = td.eq(6).text(); //0번째부터 시작이므로 마지막 줄의 td의 값
            
            jarr.push({"userno": userno, "email": email}); //배열에 userno와 email을 담는다.
        });
        var jStr = JSON.stringify(jarr); //json형태 문자열로 바꾸기
        
        if(jarr.length >= 1){
//json형태 data를 컨트롤러로 넘긴다.
            $.ajax({
                url: "tchProve.do",
                type: "post",
                data: {
                    "jStr": jStr
                },
                success: function(val){
                    if(val>=1){
                        alert("교사 승인이 완료되었습니다.");
                        location.href="/mvnschool/tchWaitList_pre.do";
                    }
                }
            })
        }
    }); //tchProveBtn
 cs

userno는 dao에서 update를 하기 위해 필요한 값이고

email은 수신자 메일주소이다.

 

 

  • Controller.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//교사 승인 -> dao를 통해 role이 2로 업데이트되고, 해당회원의 이메일로 메일 발송
    @RequestMapping(value="tchProve.do", method = RequestMethod.POST)
    @ResponseBody
    public int tchProve(@RequestParam(value="jStr") String jStr) throws AddressException, MessagingException{
        int result = -1;
        JSONArray jsonArr = new JSONArray(jStr);

//이메일 주소들을 List에 담는다.
        List<String> emailList = new ArrayList<>();
        for(int i=0; i<jsonArr.length(); i++){
            JSONObject jsonObject = jsonArr.getJSONObject(i);
            String userno = (String) jsonObject.getString("userno");
            String email = (String) jsonObject.getString("email");
            emailList.add(email);
            result = userDAO.tchProve(userno);
        }
        
        //이메일로 메일 발송
        SendEmail.sendEmail(emailList);
        
        return result;
    }
 cs

JSONArray를 통해 받아온 jStr을 다시 JSON 배열 형태로 풀어준다. 

그 배열의 크기만큼 반복문을 돌려서 JSONObject로 하나씩 뽑아낸다. 

 

userno는 dao와 연결시키고,

email은 List에 담은 후 자바메일 발송을 위해 만들어놓은 클래스의 함수와 연결시킨다.

 

 

  • dao
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//교사 승인
    public int tchProve(String userno){
        Connection conn = null;
        Statement st = null;
        int result = 0; 
        try {
            conn = getConnection();
            String sql = "update user_haksa set role =2 where userno='"+userno+"'";
            st = conn.createStatement();
            result = st.executeUpdate(sql);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            closeConnection(conn, st, null);
        }
        return result; 
    }
 cs

 

 

  • SendEmail.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
package com.mvnschool.vo;
 
import java.util.ArrayList;
import java.util.List;
import java.util.Properties;
import javax.mail.Message;
import javax.mail.MessagingException;
import javax.mail.Session;
import javax.mail.Transport;
import javax.mail.internet.AddressException;
import javax.mail.internet.InternetAddress;
import javax.mail.internet.MimeMessage;
 
public class SendEmail {
    static String host = "smtp.naver.com";
    static int port = 465;
    static String username = "네이버아이디@naver.com";
    static final String password = "네이버비밀번호";
    
    static String subject = "교사 승인";
    static String contents = "교사 승인 알람 메일";
 
    public static void sendEmail(List<String> emailList) throws AddressException, MessagingException{
        //서버정보 설정
        Properties props = System.getProperties();
        props.put("mail.smtp.host", host);
        props.put("mail.smtp.port", port);
        props.put("mail.smtp.auth", "true");
        props.put("mail.smtp.ssl.enable", "true");
        props.put("mail.smtp.ssl.trust", host);
        
        //세션 생성 & 발신자 smtp 서버 로그인 인증
        Session session = Session.getInstance(props, new javax.mail.Authenticator(){
            protected javax.mail.PasswordAuthentication getPasswordAuthentication(){
                return new javax.mail.PasswordAuthentication(username, password);
            }
        });
        session.setDebug(true); //디버그 모드
        
        //MimeMessage 생성 & 메일 세팅
        Message mimeMessage = new MimeMessage(session);
        mimeMessage.setFrom(new InternetAddress(username)); //발신자
        
        System.out.println("mailSession success");
        
        //가져온 리스트의 사이즈만큼 InternetAddress 배열 크기 정하기
        InternetAddress[] addArray = new InternetAddress[emailList.size()];
        for(int i=0; i<emailList.size(); i++){ //배열에 이메일을 저장
            addArray[i] = new InternetAddress(emailList.get(i));
        }
        mimeMessage.setRecipients(Message.RecipientType.TO, addArray);
        mimeMessage.setSubject(subject); //메일 제목
        mimeMessage.setText(contents); //메일 내용
        
        //메일 보내기
        Transport.send(mimeMessage);
        System.out.println("success sending email");
        
    }
}
 cs

⇒ 자바메일 설정하는 동안 만났던 오류들
1. ssl관련 에러

("mail.smtp.ssl.enable", "true" , "mail.smtp.ssl.true", "smtp.naver.com" 처럼 설정을 해주니까 해결)


2. username과 password 관련 에러

(발신자 smtp 서버 로그인 인증을 해야함. Authenticator만들기. 관련 주석의 밑에줄)

 

3. 그 외

메일을 보낼때 mimeMessage에 addRecipients말고 setRecipients(Message.RecipientType.TO, addArray)를 하니까

(List로 가져온 메일 주소 String을 배열 []로 풀어서 저장) 잘 보내짐.

 

 

저작자표시 비영리 변경금지

'Learning > JSP' 카테고리의 다른 글

게시판 파일 입력하기  (0) 2021.03.16
Join으로 가져온 데이터들을 테이블에 뿌리기  (0) 2021.03.10
안드로이드 어플 만들기 프로젝트 (Moodtracker)  (0) 2020.10.30
포털사이트에서 필요한 정보 출력하기 (jsoup select)  (0) 2020.08.21
주소록 만들기2  (0) 2020.08.21

다음과 같이 subject 테이블과 attend 테이블을 조인해서 데이터를 가져온다

(rownum은 페이징 처리를 위해서 사용. dao의 sql문 안에서는 ? 로 대체하고 인자값으로 endRow와 startRow가 들어감)

1
2
3
4
5
6
7
8
9
select * from 
    (select aa.*, rownum rn from 
        (select a.subno, a.subname, a.teachername, s.cnt, count(a.subno) currentCnt, a.status
        from attend a
        join subject s
        on s.subno = a.subno 
        where stuno = 'USER1'
        group by a.subno, a.subname, a.teachername, s.cnt, a.status) aa
            where rownum<=5) where rn>=1;
 cs
결과값

 

 

보통 jsp에서 <table> <tr> <td> 에 값을 뿌릴때는 List<vo클래스> 로 add해서 뿌렸었는데..

저렇게 조인으로 가져오면 단일 vo클래스가 아니므로 그 방법은 사용할 수 없다.

인터넷 서치하니까 아예 vo를 또 만들던지 map을 사용하라는데.. vo를 만드는건 스프링할때 해봤으니까 map으로 사용.

 

 

  • DAO.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
public List<Object> myAttendPre(int startRow, int endRow, String userno){
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        List<Object> list = new ArrayList<>();
        
        try {
            conn = getConnection();
            String sql = "select * from "
                        + "(select aa.*, rownum rn from "
                        + "(select a.subno, a.subname, a.teachername, s.cnt, s.submemo, count(a.subno) currentCnt, a.status "
                        + "from attend a "
                        + "join subject s "
                        + "on s.subno = a.subno "
                        + "where stuno = '"+userno+"' "
                        + "group by a.subno, a.subname, a.teachername, s.cnt, s.submemo, a.status) aa "
                        + "where rownum<=?) where rn>=?";
            pstmt = conn.prepareStatement(sql);
            pstmt.setInt(1, endRow);
            pstmt.setInt(2, startRow);
            rs = pstmt.executeQuery();
            while(rs.next()){
                Map<String, String> hm = new HashMap<>();
                hm.put("status", Integer.toString(rs.getInt("status")));
                hm.put("subno", rs.getString("subno"));
                hm.put("subname", rs.getString("subname"));
                hm.put("teachername", rs.getString("teachername"));
                hm.put("cnt", Integer.toString(rs.getInt("cnt")));
                hm.put("currentCnt", rs.getString("currentCnt"));
                list.add(hm);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            closeConnection(conn, pstmt, rs);
        }
        return list;
    }
 cs

 

맵을 while문 바깥에 선언하게 되면 당연히 key값 (status, subno, subname 등..) 이 같으므로 value값이 덮어쓰기 된다.

list에 담고나면 컨트롤러에서 model에 담고 jsp에서 원래 하던대로 el태그 안에 뿌리면 된다..

저작자표시 비영리 변경금지

'Learning > JSP' 카테고리의 다른 글

게시판 파일 입력하기  (0) 2021.03.16
checkbox에서 유저의 메일주소를 가져온 뒤 자바메일 발송하기 (javax.mail)  (0) 2021.03.16
안드로이드 어플 만들기 프로젝트 (Moodtracker)  (0) 2020.10.30
포털사이트에서 필요한 정보 출력하기 (jsoup select)  (0) 2020.08.21
주소록 만들기2  (0) 2020.08.21

내가 보여주고 싶은 결과값

위와 같이 수강편람 테이블이 있다.

맨 우측 열에서 알 수 있듯이 나는 현재 수강인원도 출력하고 싶다.

그러나 과목코드, 강의명, 교사명, 정원은 subject 테이블에 있고, 현재 수강인원은 select count(*)를 해서 attend 테이블에서 가져와야한다. 

 

1. 비조인 select / left outer join

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
--내가 보여주고 싶은 결과값: 수강편람(subject) 테이블에서 과목별 현재 수강인원 컬럼(attend 테이블을 이용)도 함께 출력하기
--결국 attend 테이블에서 subno별 count를 구한 컬럼이 붙어있도록 하는 것. (조인/비조인 방법)
--1. 비조인 select
--데이터가 많은 경우 조인을 하면 속도가 걸린다고 함
select s.subno, s.subname, s.teachername, s.cnt, 
    (select count(a.subno) from attend a where s.subno = a.subno) currentCnt 
        from subject s;
 
--2. 조인 left outer join
--일치하는 레코드가 없을 경우 빈 값으로라도 나온다 
--그냥 join을 쓰면 수강신청 안된 나머지 강의들은 보이지 않음
select s.subno, s.subname, s.teachername, s.cnt, count(a.subno) currentCnt
from subject s
left outer join attend a
on s.subno = a.subno group by s.subno, s.subname, s.teachername, s.cnt;
 cs

 

 

2. 결과값을 페이징 처리하기

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
--3. 결과 값을 페이징 처리하기
--(1) 원래 페이지 구할때 sql문
select * from 
    (select aa.*, rownum rn from
        (select * from subject order by subname) aa
            where rownum<=5) where rn>=1;
 
--(2) 비조인 select 페이징 처리
select * from 
 (select s.subno, s.subname, s.teachername, s.cnt, (select count(a.subno) from attend a where s.subno = a.subno) currentCnt, rownum rn from
        (select * from subject s order by subname) s
            where rownum<=5) where rn>=1;
 
            
--(3) left outer join을 사용해서 페이징 구하기
select * from
    (select aa.*, rownum rn from 
        (select s.subno, s.subname, s.teachername, s.cnt, count(a.subno) currentCnt
        from subject s
        left outer join attend a
        on s.subno = a.subno group by s.subno, s.subname, s.teachername, s.cnt) aa
            where rownum<=5) where rn>=1;
 cs

 

저작자표시 비영리 변경금지

'Learning > SQL' 카테고리의 다른 글

namecard 완성하기  (0) 2020.06.24
PreparedStatement  (0) 2020.06.23
JDBC SELECT  (0) 2020.06.23
JDBC INSERT  (0) 2020.06.23
JDBC Test  (0) 2020.06.23

이렇게 간단한 거였는데 하루종일 삽질했다..

 

 

<조건>

1. 이전, 다음 말고 페이지 블록 (1 2 3, 4 5 6)으로 나타내고 싶다.

2. 타임리프 말고 jsp에서 jstl로 구현해야한다.

3. Mapper가 아닌 JPA Repository를 사용해야 한다.

4. 검색결과를 반영해서 페이징을 처리하고 싶다.

 

 

Controller

	@GetMapping("/admin/userlist")
	public String userList(Model model,
			@PageableDefault(size = 10, sort = "id", direction = Sort.Direction.DESC) 
			Pageable pageable,
			@RequestParam(required = false, defaultValue = "") String field,
			@RequestParam(required = false, defaultValue = "") String word) {

		Page<User> ulist=userRepository.findAll(pageable);
		if(field.equals("username")) {
			ulist = userRepository.findByUsernameContaining(word, pageable);
		}else if(field.equals("email")){
			ulist = userRepository.findByEmailContaining(word, pageable);
		}
		
		int pageNumber=ulist.getPageable().getPageNumber(); //현재페이지
		int totalPages=ulist.getTotalPages(); //총 페이지 수. 검색에따라 10개면 10개..
		int pageBlock = 5; //블럭의 수 1, 2, 3, 4, 5	
		int startBlockPage = ((pageNumber)/pageBlock)*pageBlock+1; //현재 페이지가 7이라면 1*5+1=6
		int endBlockPage = startBlockPage+pageBlock-1; //6+5-1=10. 6,7,8,9,10해서 10.
		endBlockPage= totalPages<endBlockPage? totalPages:endBlockPage;
		
		model.addAttribute("startBlockPage", startBlockPage);
		model.addAttribute("endBlockPage", endBlockPage);
		model.addAttribute("ulist", ulist);
		
		return "/user/userlist";
	}

 

 

Repository

public interface UserRepository extends JpaRepository<User, Integer>{
    
    // 회원 목록 + 검색
	Page<User> findAll(Pageable pageable);
	Page<User> findByUsernameContaining(String username, Pageable pageable);
	Page<User> findByEmailContaining(String email, Pageable pageable);
    
}

 

 

JSP

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="/WEB-INF/views/include/header.jsp"%>
<div class="container"><br/>
	<h3 id="font-h3">회원리스트</h3>
	
	<!-- 검색 영역 시작-->
	<form action="/admin/userlist" class="form-inline d-flex justify-content-end"
		method="GET">
		<select name="field" id="field" class="form-control form-control-sm">
			<option value="username">아이디</option>
			<option value="email">이메일</option>
		</select> 
		<input type="text" id="word" name="word" class="form-control form-control-sm"
			style="margin: 10px;"> 
		<input type="submit" class="btn btn-outline-info btn-sm" value="검색">
	</form>
	<!-- 검색 영역 끝 -->

	<!-- 테이블 영역 시작-->
	<table class="table table-hover">
	
	<caption>회원 수: ${ulist.totalElements}</caption><!-- 회원 수 -->
		<tr>
			<th>번호</th>
			<th>아이디</th>
			<th>이메일</th>
			<th>가입일</th>
		</tr>
		<c:forEach items="${ulist.content}" var="user">
			<tr>
				<td>${user.id}</td>
				<td><a href="/admin/view/${user.id}">${user.username}</a></td>
				<td>${user.email}</td>
				<td>${user.createDate}</td>
			</tr>
		</c:forEach>
	</table>
	<!-- 테이블 영역 끝 -->
	
	<!-- 페이징 영역 시작 -->
	<div class="text-xs-center">
		<ul class="pagination justify-content-center">
		
			<!-- 이전 -->
			<c:choose>
				<c:when test="${ulist.first}"></c:when>
				<c:otherwise>
					<li class="page-item"><a class="page-link" href="/admin/userlist/?field=${param.field}&word=${param.word}&page=0">처음</a></li>
					<li class="page-item"><a class="page-link" href="/admin/userlist/?field=${param.field}&word=${param.word}&page=${ulist.number-1}">&larr;</a></li>
				</c:otherwise>
			</c:choose>

			<!-- 페이지 그룹 -->
			<c:forEach begin="${startBlockPage}" end="${endBlockPage}" var="i">
				<c:choose>
					<c:when test="${ulist.pageable.pageNumber+1 == i}">
						<li class="page-item disabled"><a class="page-link" href="/admin/userlist/?field=${param.field}&word=${param.word}&page=${i-1}">${i}</a></li>
					</c:when>
					<c:otherwise>
						<li class="page-item"><a class="page-link" href="/admin/userlist/?field=${param.field}&word=${param.word}&page=${i-1}">${i}</a></li>
					</c:otherwise>
				</c:choose>
			</c:forEach>
			
			<!-- 다음 -->
			<c:choose>
				<c:when test="${ulist.last}"></c:when>
				<c:otherwise>
					<li class="page-item "><a class="page-link" href="/admin/userlist/?field=${param.field}&word=${param.word}&page=${ulist.number+1}">&rarr;</a></li>
					<li class="page-item "><a class="page-link" href="/admin/userlist/?field=${param.field}&word=${param.word}&page=${ulist.totalPages-1}">마지막</a></li>
				</c:otherwise>
			</c:choose>
		</ul>
	</div>
	<!-- 페이징 영역 끝 -->
</div>

 

 

결과

전체리스트

 

검색어 "ad" 를 넣었을때.. 페이지 자동 반영

 

 

+

다른페이지로 이동할때마다 새로고침된다.

비동기 방식으로 머 어떻게 하는건..다음에..

저작자표시 비영리 변경금지

'Learning > Spring' 카테고리의 다른 글

Maven (MyBatis 방식)  (0) 2020.10.13
Maven (JDBC template 방식)  (0) 2020.10.13
Mybatis 회원가입  (0) 2020.10.08
@Service 추가 간단한 주소록  (0) 2020.10.08
간단한 회원가입 실습  (0) 2020.10.06

github.com/kkj0712/Moodtracker-App

 

kkj0712/Moodtracker-App

Android and JSP Application Project. Contribute to kkj0712/Moodtracker-App development by creating an account on GitHub.

github.com

 

저작자표시 비영리 변경금지

'Learning > JSP' 카테고리의 다른 글

checkbox에서 유저의 메일주소를 가져온 뒤 자바메일 발송하기 (javax.mail)  (0) 2021.03.16
Join으로 가져온 데이터들을 테이블에 뿌리기  (0) 2021.03.10
포털사이트에서 필요한 정보 출력하기 (jsoup select)  (0) 2020.08.21
주소록 만들기2  (0) 2020.08.21
Mybatis 연동하기 (주소록 만들기1)  (0) 2020.08.19

www.notion.so/Maven-MyBatis-0794eb1f792044bfafa52d8fe50270d0

github.com/kkj0712/Spring/tree/master/06_MemberMavenMybatis

 

kkj0712/Spring

Contribute to kkj0712/Spring development by creating an account on GitHub.

github.com

 

저작자표시 비영리 변경금지

'Learning > Spring' 카테고리의 다른 글

스프링부트 JPA+jsp(jstl) 페이징 처리 Pageable  (0) 2020.11.18
Maven (JDBC template 방식)  (0) 2020.10.13
Mybatis 회원가입  (0) 2020.10.08
@Service 추가 간단한 주소록  (0) 2020.10.08
간단한 회원가입 실습  (0) 2020.10.06

www.notion.so/Maven-JDBC-template-dcf7b325b9f24f189ffcdc3381027b11

github.com/kkj0712/Spring/tree/master/05_MemberMaven

 

kkj0712/Spring

Contribute to kkj0712/Spring development by creating an account on GitHub.

github.com

 

저작자표시 비영리 변경금지

'Learning > Spring' 카테고리의 다른 글

스프링부트 JPA+jsp(jstl) 페이징 처리 Pageable  (0) 2020.11.18
Maven (MyBatis 방식)  (0) 2020.10.13
Mybatis 회원가입  (0) 2020.10.08
@Service 추가 간단한 주소록  (0) 2020.10.08
간단한 회원가입 실습  (0) 2020.10.06

www.notion.so/Mybatis-51cfd80d40434b5ab8b6b7abec70e1f6

 

 

www.notion.so/Mybatis-51cfd80d40434b5ab8b6b7abec70e1f6

 

저작자표시 비영리 변경금지

'Learning > Spring' 카테고리의 다른 글

Maven (MyBatis 방식)  (0) 2020.10.13
Maven (JDBC template 방식)  (0) 2020.10.13
@Service 추가 간단한 주소록  (0) 2020.10.08
간단한 회원가입 실습  (0) 2020.10.06
간단한 주소록 만들기 (스프링 컨테이너)  (0) 2020.10.06

+ Recent posts

티스토리툴바