반응형
게시판 페이징 추가하기
board.jsp에 페이징 작업을 해야한다. 이 부분에서 코어태그를 사용해야 하는데 이게 좀 헷갈린다.
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
코어태그는 <c:--></c:--> 이렇게 앞에 prefix에서 정해준 문자열을 적고 if, choose, set, forEach 등 자바에서 썼던 문법을 가져올 수 있다. 다른 점이 몇가지 있지만 비슷하게 사용된다.
자바 기초 수업이 끝나고, 게시판 만들기를 진행하면서 프론트 부분은 생각보다 할만한데 위에서 말한 부분(자바와 비슷한)에서 조금 막힌다고 해야할까.... EL태그(Expression Language)를 쓰는 것도 익숙치 않아서일까..
<!-- 페이지 수 : ${totalCount / 10 } 이렇게 쓰면 계산이 안됨 , jstl 로 써서 java 문 입력하자-->
<!-- 파스넘버: 소수점을 정수로 처리 -->
<!-- 나머지 값이 있다면 +1 시켜줘 -->
전체 글 : ${totalCount }개 /
페이지 수 : <c:set var="totalPage" value="${totalCount / 10 }"/>
<fmt:parseNumber integerOnly="true" value="${totalPage }" var="totalPage"/>
<c:if test="${totalCount % 5 gt 0 }">
<c:set var="totalPage" value="${totalPage + 1 }"/>
</c:if>
<c:out value="${totalPage }"/>
/ startPage : <c:set var="startPage" value="1"/>
<c:if test="${page gt 2 }">
<c:set var="startPage" value="${page - 1 }"/>
</c:if>
${startPage }
/ endPage : <c:set var="endPage" value="${startPage + 4 }"/>
<div class="paging">
<button onclick="paging(1)">👈</button>
<button
<c:if test="${page - 1 lt 1 }">disabled="disabled"</c:if>
onclick="paging(${page - 1})">🦕🦕🦕</button>
<c:forEach begin="${startPage}" end="${endPage}" var="p">
<button
<c:if test="${page eq p }">class="currentBtn"</c:if>
onclick="paging(${p})">${p}</button>
</c:forEach>
<button
<c:if test="${page eq totalPage}">disabled="disabled"</c:if>
onclick="paging(${page + 1})">🐌🐌🐌</button>
<button onclick="paging(${totalPage})">👉</button>
</div>
</c:when>
<c:otherwise>
<h1>출력할 값이 없읍니다..</h1>
</c:otherwise>
</c:choose>
회원가입 페이지 만들기
회원가입 페이지는 join.jsp를 만들어서 진행했다. 서블릿으로 join 페이지를 연결해주고 아이디, 이름, 비밀번호를 입력할 수 있는 템플릿을 만들었다. 이러한 템플릿은 부트스트랩 문서에서 가져와서 적용하면 된다. 이렇게 만들면 생각보다 쉽게 만들 수 있겠다는 생각이 들었다. 나아가서 스트링이나 스트링부트 등을 배우면 더 쉽게 만들 수 있겠지?
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!-- jstl을 쓰기 위한 코어태그 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./css/index.css" rel="stylesheet">
<link href="./css/menu.css" rel="stylesheet">
<script type="text/javascript" src="./js/menu.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</head>
<body>
<div class="container2">
<header>
<%@ include file="menu.jsp"%>
</header>
<div class="main">
<div class="mainStyle">
<article>
<div class="join-form">
<h1>회원가입</h1>
<div class="mx-3 p-3 rounded-3" style="background-color: #C9ABFC";>
<form action="./join" method="post">
<div class="input-group mb-2">
<label class="input-group-text"> 아이디 </label>
<input type="text" id="id" name="id" class="form-control" placeholder="아이디를 입력하세요.">
</div>
<div class="input-group mb-2">
<label class="input-group-text">이 름</label>
<input type="text" id="name" name="name" class="form-control" placeholder="이름을 입력하세요.">
</div>
<div class="input-group mb-2">
<label class="input-group-text">암 호</label>
<input type="password" id="pw1" name="pw1" class="form-control" placeholder="암호를 설정해주세요.">
<label class="input-group-text">재입력</label>
<input type="password" id="pw2" name="pw2" class="form-control" placeholder="암호가 맞는지 다시 확인합니다.">
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button type="reset" class="btn btn-primary me-md-2" style="background-color: #8E44EC; border-color: #8E44EC;">초기화</button>
<button type="submit" class="btn btn-primary" style="background-color: #8E44EC; border-color: #8E44EC;">가입하기</button>
</div>
</form>
</div>
</div>
</article>
</div>
</div>
<footer>
<c:import url="footer.jsp"/>
</footer>
</div>
</body>
</html>
https://getbootstrap.kr/docs/5.0/getting-started/introduction/
시작하기
세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요.
getbootstrap.kr
반응형
'개발 공부 Today I Learned' 카테고리의 다른 글
| [국비 42일차 TIL] ID중복검사, 댓글 테이블, 관계도 (0) | 2024.01.19 |
|---|---|
| [국비 41일차 TIL] jQuery jsp 회원가입, id 중복확인 (0) | 2024.01.18 |
| [국비 39일차 TIL] 마이페이지, pw 변경 (1) | 2024.01.16 |
| [국비 38일차 TIL] 로그인 페이지 세션, 로그아웃 (1) | 2024.01.15 |
| [국비 37일차 TIL] 게시판 로그인 페이지 만들기 (0) | 2024.01.12 |
댓글