2024-01-24(33일차) - JSP_AM_2024_01
📅2024. 01. 24 33일차
🎬JSP_AM_2024_01 구현
게시물 페이징 구현
ver_1
코드 리뷰 💡
인트형 변수 pageSize에 5를 초기화 인트형 변수 from에 cPage - pageSize값 초기화
from이 의미하는 것은??
- cPage에서 앞으로 보여지는 페이지 숫자?
pageSize가 의미하는 것은???
- 한 번에 눈으로 볼 수 있는 페이지의 갯수??
만약 from이 1보다 작으면
from의 값을 1로 초기화
인트형 변수 end에 cPage + pageSize 값을 초기화
end가 의미하는 것은??
- cPage에서 뒤로 보여지는 페이지 숫자?
만약 end가 totalPage보다 크면
end변수에 totalPage 값으로 초기화
<div class="page_box page_v1">
<div class="page">
<%
if (cPage > 1) {
%>
<a href="list?page=1">◀◀</a>
<%
}
int pageSize = 5;
int from = cPage - pageSize;
if (from < 1) {
from = 1;
}
int end = cPage + pageSize;
if (end > totalPage) {
end = totalPage;
}
for (int i = from; i <= end; i++) {
%>
<a class="<%=cPage == i ? "cPage" : ""%>" href="list?page=<%=i%>"><%=i%></a>
<%
}
if (cPage < totalPage) {
%>
<a href="list?page=<%=totalPage%>">▶▶</a>
<%
}
%>
</div>
</div>ver_2
코드 리뷰 💡
인트형 변수 pageSize에 10으로 초기화
- 한 화면에 보여줄 페이지 갯수 만큼
인트형 변수 pageGroup에 cPage/pageSizer값 올림하여 초기화
- 한 번에 보여줄 페이지의 그룹
인트형 변수 from에 ((pageGroup -1) * pageSize) +1로 초기화
- 한 번에 보여줄 때의 첫 번째 페이지 번호
인트형 변수 end에 pageGroup *pageSize 값으로 초기화
- 한 번에 보여줄 때의 마지막 페이지 번호
만약 pageGroup * pageSize값이 totalPage보다 크면 end 변수에 totalPage 값으로 초기화
만약 from의 값이 1보다 작으면 from 변수에 값 1로 초기화
만약 end 값이 totalPage 값보다 크면 end 변수에 totalPage 값으로 초기화
인트형 변수 beforeBtn에 cPage - pageSize값으로 초기화
만약 beforBtn의 값이 1보다 작으면 beforBtn변수에 값 1로 초기화
인트형 변수 afterBtn에 cpage + pageSize 값으로 초기화
만약 afterBtn이 totalPage보다 크면 afterBtn변수에 totalPage 값으로 초기화
<div class="page_box page_v2" style="margin-top: 50px">
<div class="page">
<%
if (cPage > 1) {
%>
<a href="list?page=1">◀◀</a>
<%
}
int pageSize_v2 = 10; //한 화면에 보여줄 페이지 갯수 -> 10개
int pageGroup = (int) Math.ceil((double) cPage / pageSize_v2); // 한번에 보여줄 페이지의 그룹
int from_v2 = ((pageGroup - 1) * pageSize_v2) + 1; // 한번에 보여줄 때의 첫번째 페이지 번호
int end_v2 = pageGroup * pageSize_v2; // 한번에 보여줄 때의 마지막 페이지 번호
if (pageGroup * pageSize_v2 > totalPage) {
end_v2 = totalPage;
}
if (from_v2 < 1) {
from_v2 = 1;
}
if (end_v2 > totalPage) {
end_v2 = totalPage;
}
int beforeBtn = cPage - pageSize_v2;
if (beforeBtn < 1) {
beforeBtn = 1;
}
%>
<a href="list?page=<%=beforeBtn%>">◁</a>
<%
for (int i = from_v2; i <= end_v2; i++) {
%>
<a class="<%=cPage == i ? "cPage" : ""%>" href="list?page=<%=i%>"><%=i%></a>
<%
}
int afterBtn = cPage + pageSize_v2;
if (afterBtn > totalPage) {
afterBtn = totalPage;
}
%>
<a href="list?page=<%=afterBtn%>">▷</a>
<%
if (cPage < totalPage) {
%>
<a href="list?page=<%=totalPage%>">▶▶</a>
<%
}
%>
</div>
</div>회원가입 구현
💡띵킹타임
- MemberDojoinServelt이랑 MemberJoinServelt 구현 해야 할 것 같다.
- 음..일단 member table을 만들어야 되지 않을까???
- DBMS에 member table을 만들어놨다. 그 다음은?? 회원정보를 입력 받아 insert해야겠는데?? 근데 이거 write랑 비슷하지 않아??
- write 가져와서 memberjoin으로 바꾼다음 insert해보자.
- 그럼 jsp file도 만들어야 하는데? member 폴더를 따로 만들어서 write jsp file을 참고해서 만들어보자.
- MemberDoJoinServlet
try {
conn = DriverManager.getConnection(url, user, password);
String name = request.getParameter("name");
String loginId = request.getParameter("loginId");
String loginPw = request.getParameter("loginPw");
SecSql sql = SecSql.from("INSERT INTO member");
sql.append("SET regDate = NOW(),");
sql.append("name = ?,", name);
sql.append("loginId = ?,", loginId);
sql.append("loginPw = ?;", loginPw);
DBUtil.insert(conn, sql);
response.getWriter()
.append(String.format("<script>alert('%s 님 환영합니다.'); location.replace('../home/main');</script>", name));
} catch (SQLException e) {
System.out.println("에러 : " + e);
} finally {
try {
if (conn != null && !conn.isClosed()) {
conn.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}- MemberJoinServlet
@WebServlet("/member/join")
public class MemberJoinServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.getRequestDispatcher("/jsp/member/join.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}- join.jsp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 페이지</title>
</head>
<body>
<h2>회원가입</h2>
<form method="POST" action="doJoin">
<div>
이름 : <input type="text" placeholder="이름을 입력해주세요" name="name" />
</div>
<div>
아이디 : <input type="text" placeholder="아이디를 입력해주세요" name="loginId" />
</div>
<div>
비밀번호 : <input type="text" placeholder="비밀번호를 입력해주세요" name="loginPw" />
</div>
<div>
비밀번호 재입력 : <input type="text" placeholder="비밀번호를 재입력해주세요" name="loginPwConfirm" />
</div>
<button type="submit">가입</button>
</form>
<div>
<a style="color: green" href="/JSP_AM_2024_01/home/main">메인화면으로 돌아가기</a>
</div>
</body>
</html>
🔐문제 발생!!
- 회원가입 창 만들고 입력해야하는데 이전 입력값의 자동입력창이 나옴
🔐문제 해결!!
- autocomplete="off"
- 회원가입 창 만들고 입력해야하는데 이전 입력값의 자동입력창 제거!!!
<form method="POST" action="doJoin">
<div>
이름 : <input autocomplete="off" type="text" placeholder="이름을 입력해주세요" name="name" />
</div>
<div>
아이디 : <input autocomplete="off" type="text" placeholder="아이디를 입력해주세요" name="loginId" />
</div>
<div>
비밀번호 : <input autocomplete="off" type="text" placeholder="비밀번호를 입력해주세요" name="loginPw" />
</div>
<div>
비밀번호 재입력 : <input autocomplete="off" type="text" placeholder="비밀번호를 재입력해주세요" name="loginPwConfirm" />
</div>
<button type="submit">가입</button>
</form>🔐문제 발생!!
- 아무것도 입력 안해도 다음 페이지로 넘어간다.
🔐문제 해결!!
- autocomplete="off"
- 회원가입 창 만들고 입력해야하는데 이전 입력값의 자동입력창 제거!!!
🔐문제 발생!!
- 비밀번호랑 비밀번호 재입력이랑 달라도 넘어간다.
🔐문제 해결!!
if(loginPw != loginPwconfurm) {
alert (' 비밀번호가 일치하지 않습니다,');
for.loginPw.focus();
return;confirm이란?
- 텍스트와 확인 및 취소 버튼을 출력하여 사용자의 선택을 받는 매우 간단한 다이얼로그 박스를 보여준다.
- onclick = "if (confirm('진짜 이동해?') == false) return false;"
예시
<script>
var delConfirm = confirm('당신의 파일이 삭제됩니다.');
if (delConfirm) {
alert('삭제되었습니다.');
}
else {
alert('삭제가 취소되었습니다.');
}
</script>focus
- from.loginId,focus
form.submit();
- action에서 보내는게 아니라 함수로 보낸다 (수동)
아이디 중복 체크 구현
💡띵킹타임
-
아이디 중복 체크
DB에 저장되 있는 loginId을 가져와서 input하는 loginId와 같은지 다른지 알아야 하지 않을까???? -
회원가입 아이디 입력창에서 아이디 입력하고 중복체크를 버튼식으로 만들고 버튼을 누르면 DB에 저장된 loginId을 가져와 비교해서 알려주게 만들면 되나???
-
어떻게 해야함????;;;;
-
버튼을 누르면 중복아이디 체크할 수 있는 jsp 파일로 넘어가야 할 것 같은데?? 지금 join.jsp 파일의 form action경로는 dojoin인데?? 경로를 두 개로 가질 수 있을 까???
아직 해결 못함!!!
