Sesac 14일차

SungMin·2022년 10월 24일

Java Spring

Sesac-Java/Spring

목록 보기

10/13

연습문제

pagination

페이지 번호를 10 단위로 작성
현재 페이지는 파란색, 다른 페이지는 빨간색

ThymleafController.java

@GetMapping("pagination")
    public String pagination(Model model, @RequestParam(defaultValue = "1") int page) {
        int startPage = (page - 1) / 10 * 10 + 1;
        System.out.println("시작 페이지 체크 : " + startPage);
        int endPage = startPage + 9;
        model.addAttribute("startPage", startPage);
        model.addAttribute("endPage", endPage);
        model.addAttribute("page", page);
        return "pagination";
    }

pagination.html

<!-- #numbers : 타임리프에서 자체적으로 제공하는 자바에서의 클래스와 흡사한 개념
    #~ : 타임리프에서 제공하는 기본 객체(자바의 클래스) -->
<th:block th:each="pageNumber : ${#numbers.sequence(startPage, endPage)}">
    <!-- style 속성 : 해당 요소를 꾸며주기 위해 사용. 여러개의 속성값을 사용할 때 ;으로 구분 -->
    <span th:if="${page} == ${pageNumber}" th:text="${pageNumber}"
        style="font-weight: bold; color: blue;"></span>
    <span th:unless="${page} == ${pageNumber}" th:text="${pageNumber}"
        style="color: rgb(255, 0, 0);"></span>
    <span></span>
</th:block>

출력 결과

http://localhost:8080/pagination?page=32

linkurl

현재 페이지는 하이퍼링크가 걸리지 않도록 구현

@GetMapping("linkUrl") // http://localhost:8080/linkUrl?page=*
    public String linkUrl(Model model, @RequestParam(defaultValue = "1") int page) {
        int startPage = (page - 1) / 10 * 10 + 1;
        int endPage = startPage + 9;
        model.addAttribute("startPage", startPage);
        model.addAttribute("endPage", endPage);
        model.addAttribute("page", page);
        return "linkUrl";
    }

linkurl.html

<!-- a태그 : html에서 특정 주소 값으로 이동시켜주는 버튼
    href속성 : a태그에서 사용하는 문법, 디오시킬 주소를 명시해준다. -->
<!-- 기본 a태그 -->
<a href="/">홈 화면으로 이동</a>
<a href="/gugudan?dan=3">구구단 2~3단 출력</a>
<th:block th:each="pageNumber : ${#numbers.sequence(startPage, endPage)}">
    <!-- 타임리프의 href 사용-->
    <!-- th:href 사용 : @{이동시킬 주소(파라미터=값)} -->
    <th:block th:if="${page} == ${pageNumber}">
        <span>[[${pageNumber}]]</span>
    </th:block>
    <th:block th:unless="${page} == ${pageNumber}">
        <a th:href="@{/linkUrl(page=${pageNumber})}" th:text="${pageNumber}"></a>
    </th:block>
    <!-- 기본 a태그의 href속성을 사용하게 되면 전부 문자열로 읽힌다. -->
    <!-- <a href="/linkUrl?page=${pageNumber}">[[${pageNumber}]]</a> -->
</th:block>

출력 결과

http://localhost:8080/linkUrl?page=4

아이디와 비밀번호를 입력하여 로그인할 수 있는 페이지를 구현

@GetMapping("login3")
    public String login3() {
        return "login3";
    }

    @PostMapping("login3")
    public String login3(Model model, @RequestParam("id") String id, @RequestParam("pw") String pw) {
        System.out.println("아이디 확인 : "+id);
        System.out.println("비밀번호 확인 : "+pw);
        model.addAttribute("id", id);
        model.addAttribute("pw", pw);
        return "loginResult";
    }

login3.html

<html xmlns:th="http://www.thymeleaf.org">

<head>
</head>

<body>
    <h1>로그인 post 메서드 테스트</h1>
    <hr/>
    <!-- input 태그 : 사용자로부터 입력을 받을 수 있는 태그 -->
    <!-- <input type="text" placeholder="아이디" /> -->
    <!-- <input type="text" placeholder="비밀번호" /> -->

    <!-- form태그 : url요청을 함과 동시에 메소드 타입도 같이 지정할 수 있다. -->
    <form action="/login3" method="post">
        <input type="text" placeholder="아이디" name="id"/>
        <input type="password" placeholder="비밀번호" name="pw"/>
        <input type="submit" value="로그인"/>
    </form>
</body>

</html>

출력 결과

이 상태로는 아무 아이디나 비밀번호를 입력해도 다 로그인 가능하다.

관리자 로그인 페이지

Get, Set 매핑 활용 연습문제
Get요청으로 들어왔을 때는 adminLogin.html로 이동
adminLogin.html에서는 form태그와 input태그를 활용해서 로그인 기능 적용
adminLogin.html에서 로그인 시도하게 되면 adminLogin의 post매핑으로 연결
이 때 파라미터는 id와 pw라고 한다.
관리자 계정 정보는 id는 admin, pw는 1234이며
로그인 성공시 adminPage.html로 이동
로그인 실패시 loginFail.html로 이동

@GetMapping("adminLogin")
    public String adminLogin(){
        return "adminLogin";
    }

    @PostMapping("adminLogin")
    public String adminLogin(Model model, @RequestParam Map<String,Object> map) {
        String adminId = "admin";
        String adminPw = "1234";

        // 로그인시도 정보
        String id = (String) map.get("id");
        String pw = (String) map.get("pw");
        //로그인 결과에 따라서 보여줄 페이지 저장하는 변수
        String view = "";
        // && 연산을 하면서 id, pw모두 일치하는 경우에만 로그인 성공
        if (id.equals(adminId) && pw.equals(adminPw)) {
            view = "adminPage";
        } else {
            view = "loginFail";
        }
        return view;
    }

}

adminLogin.html

<html xmlns:th="http://www.thymeleaf.org">

<head>
</head>

<body>
    <h1>관리자 로그인 페이지</h1>
    <hr/>
    <form action="/adminLogin" method="post">
        <input type="text" placeholder="아이디" name="id"/>
        <input type="password" placeholder="비밀번호" name="pw"/>
        <input type="submit" value="로그인"/>
    </form>
</body>

</html>