반응형
1)model 1 (44일차의 내용이 이어짐)
1-1) 로그인 시 아이디 , 비밀번호 유효성검사(하나라도입력해야함)
1-2) 로그인
1-3) main창
1-4)main정보 보기(info)
1-5)프레임워크(sitemesh)
1-6)회원목록조회
1-7)updateForm
2025.04.04 - [JSP] - 부트캠프44일차(model1 )
부트캠프44일차(model1 )
오늘의 추천곡입니다벚꽃이 많이 피고 있는것 같아요 그런데 여기에 박혀서 코딩이나하고있네요 하하ㅏ하하하하ㅏ하하 Flower아티스트오반(OVAN)앨범교회오빠발매일2025.03.13 1) application객체 ,
ddkk1120.tistory.com
1)model 1 (44일차의 내용이 이어짐)
1-1) 로그인 시 아이디 , 비밀번호 유효성검사(하나라도입력해야함)
( 시작화면임)
/model1Study/src/main/webapp/member/loginForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LOGIN FORM</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<form action="login.jsp" method="post" name="f" onsubmit="return input_check(this)">
<table><caption>로그인</caption>
<tr><th>아이디</th><td><input type="text" name="id"></td></tr>
<tr><th>PW</th><td><input type="password" name="pass"></td></tr>
<tr><td colspan="2"><button>로그인</button>
<button type="button" onclick="location.href='joinForm.jsp'">회원가입</button>
<button type="button" onclick="win_open('idForm')">아이디찾기</button>
<button type="button" onclick="win_open('pwForm')">PW찾기</button>
</td></tr>
</table>
</form>
<!--
1.input check(this)
2.win_open('pwForm')
-->
<script>
function input_check(f){
if(f.id.value.trim() == ""){
alert("아이디 입력하세요");
f.id.focus();
return false;
}
else if(f.pass.value.trim() == "" ){
//f.pass.value.trim().length <= 0
alert("비번입력");
return false;
}
return true;
}
function win_open(page){
/*버튼클릭시 해당페이지.jsp를 열어라*/
open(page+".jsp","","width=500,height=500,top=100 left=100" );
}
</script>
</body>
</html>
1-2) 로그인
loginForm.jsp 의 <form action="login.jsp" method="post" name="f" onsubmit="return input_check(this)">
로 인해
(아이디와 비밀번호를 모두입력했다면 로그인버튼 클릭시 동작하는 페이지)
login.jsp
<%@page import="model.member.MemberDto"%>
<%@page import="model.member.Member"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%--
1파라미터값을 조회해야함
2.DB에서 입력된 아이디의 레코드를 읽어서 멤버객체에저장
3.입력된내용과 조회된 내용을 비교
아이디존재 : 없는경우 -> 아이디없음 메시지출력 후 loginForm.jsp로이동
있는경우 => 비번을 비교
비밀번호 비교
불일치 : 비밀번호 오류 loginForm.jsp로이동
일치 : session 로그인정보등록 , main.jsp로이동
--%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LOGIN</title>
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");
String pass = request.getParameter("pass");
//DB에서 등록정보조회
Member mem = new MemberDto().selectOne(id);
//3 내용비교
String msg=null;
String url = "loginForm.jsp";
if(mem==null){
msg="아이디를 확인하세요";
}
else{
//요청받은 비밀번호와 DB의 비밀번호비교
if(pass.equals(mem.getPass())){//로그인성공
session.setAttribute("login", id); //login속성 등록
msg= mem.getName()+"님이 로그인 하셨습니다";
url = "main.jsp";
}
else{
msg = "비밀번호가 틀려요";
//url = "loginForm.jsp";
}
}
%>
<script type="text/javascript">
alert("<%=msg%>");
location.href = "<%= url%>";
</script>
</body>
</html>
추가된 MemberDto의 메서드
( Member selectOne(String id))
public Member selectOne(String id) {
String sql = "select * from member where id=?";
Connection conn = DBConnection.getConnection();
PreparedStatement psmt =null;
ResultSet rs = null;
try {
psmt = conn.prepareStatement(sql);
psmt.setString(1, id);//?를 파라미터로받은 id로 사용한다.
rs = psmt.executeQuery();//select문 실행
while(rs.next()) {//id에 해당하는 레코드가있는지 검사
Member mem = new Member();
if(rs.getString(1).equals(id)) {
mem.setId(rs.getString("id")); //rs.getString("컬럼명")
mem.setPass(rs.getString("pass"));
mem.setName(rs.getString("name"));
mem.setGender(rs.getInt("gender"));//이거만 int형임
mem.setTel(rs.getString("tel"));
mem.setEmail(rs.getString("email"));
mem.setPicture(rs.getString("picture"));
return mem;
}
}
}
catch(Exception e) {
e.printStackTrace();
}
finally {
DBConnection.close(conn, psmt, rs);
}
return null; //없다면 null;
}
1-3) main창 (로그인 성공 후 나타나는 창)
/webapp/member/main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- /webapp/member/main.jsp -->
<!--
1.로그인여부 검증이필요함 => main.jsp페이지는 로그인상태에서만 조회
현재 로그인 상태 : 현재화면 출력
현재 로그아웃상태 : 이 페이지는 보여줄수없음
(로그인하라는 메시지와 함께 loginForm.jsp창으로이동)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MAIN</title>
</head>
<body>
<%String login = (String)session.getAttribute("login");
if(login != null){
%>
<!-- session에 login속성에 값이있다면 로그인되어있다고본다. -->
<h3><%= login %>님이 로그인 했어요</h3>
<h3><a href="logout.jsp">로그아웃</a></h3>
<!-- 관리자로 로그인 시 회원목록조회 -->
<%if(login.equals("admin")){ %>
<h3><a href="list.jsp">회원목록보기</a></h3>
<%} %>
<!--login을 paramter("id") 설정하며 info.jsp로 이동-->
<h3><a href="info.jsp?id=<%= login%>">회원정보 보기</a></h3>
<% }
//로그아웃상태 session에 login속성이 존재X==
//lgoinForm.jsp로 이동
else{%>
<script type="text/javascript">
alert("로그인하세요");
location.href = "loginForm.jsp";
</script>
<%} %>
</body>
</html>관리자로 로그인 시
관리자 X로 로그인 시
로그아웃 버튼 클릭 시
/webapp/member/logout.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//session.removeAttribute("login");
//새로운 session객체로변경 , 이전 session객체에 등록된 모든속성이없다
session.invalidate();
%>
<script type="text/javascript">
alert("로그아웃")
location.href = "loginForm.jsp";
</script>
session속성("login")을 없앤 후
loginForm.jsp(초기화면)으로 이동
1-4) 회원정보보기(info구현)
1. 로그인상태검증
로그아웃상태 : 로그인하세요
로그인상태 : 회원정보보여줌(자신)
다른id를 조회불가능 단 관리자는 다른id를 조회할수있음
2.id파라미터조회
main.jsp에서 ?id=<%= login%>"> 를 전달받음
3.id에 해당하는 레코드조회
<!-- /webapp/member/info.jsp -->
<%@page import="model.member.MemberDto"%>
<%@page import="model.member.Member"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- /webapp/member/info.jsp -->
<!--
1. 로그인상태검증
로그아웃상태 : 로그인하세요
로그인상태 : 회원정보보여줌(자신)
다른id를 조회불가능 단 관리자는 다른id를 조회할수있음
2.id파라미터조회
3.id에 해당하는 레코드조회
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>info(회원정보)</title>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<!-- 로그인여부 검증이필요함 (속성으로 로그인여부를 판단가능) -->
<%
String login = (String)session.getAttribute("login");
String id = request.getParameter("id");
if(login == null){ // login속성이없다면(로그아웃상태라면)
%>
<script type="text/javascript">
alert("로그인부터하세요");
location.href = "loginForm.jsp";
</script>
<!-- login회원과 파라미터의id가 일치하지않으며 ,login정보가 admin이 아닌경우 -->
<!-- 즉admin이 아닌 회원은 자신의 정보만 조회가능하단 뜻 -->
<%}else if(!id.equals(login) && !login.equals("admin")){ %>
<script>
alert("자신의정보만 확인 가능합니다");
location.href = "main.jsp";
</script>
<!-- login정보가 admin이거나 , login정보와 id가 일치하는경우 -->
<!-- session(login정보)가 admin인 회원은 파라미터를변경해 다른회원 조회가능 -->
<% }else{
Member mem = new MemberDto().selectOne(id);
%>
<table><caption>회원정보</caption>
<tr><td rowspan="6" width="30%">
<img src="picture/<%=mem.getPicture() %>" width="200" height="210"></td>
<th width="20%">아이디</th><td><%= mem.getId() %></td>
<tr><th>이름</th><td><%=mem.getName() %></td></tr>
<tr><th>성별</th><td><%=mem.getGender()==1?"남":"여" %></td></tr>
<tr><th>전화</th><td><%=mem.getTel()%></td></tr>
<tr><th>이메일</th><td><%=mem.getEmail() %></td></tr>
<tr><td colspan="2">
<a href="updateForm.jsp?id=<%=mem.getId()%>">수정</a>
<%if(!login.equals("admin")) { //admin이 아닌경우에만 나타나게%>
<a href="deleteForm.jsp?id=<%=mem.getId()%>">탈퇴</a>
<%} %>
</tr>
</table>
<%} %>
</body>
</html>
id가 admin일 경우 다른 id를 파라미터를 조작해 조회가 가능함
admin이 아닌 회원이 파라미터를 조작해 다른 id를 확인하려고할 떄
1-5) 프레임워크( sitemesh )
화면을 한번에 만들어주는 프레임워크
복붙경로
/webapp/WEB-INF/lib/sitemesh-3.0.1.jar
sitemesh의 기능
화면에 layout페이지 구현해 jsp페이지 적용하는 프레임워크
사용법 (filter생성)
/model1Study/src/main/java/sitemesh/SiteMeshFilter.java
package sitemesh;
import javax.servlet.annotation.WebFilter;
import org.sitemesh.builder.SiteMeshFilterBuilder;
import org.sitemesh.config.ConfigurableSiteMeshFilter;
/*
*1.sitemesh 패지키생성
*2.SiteMeshFilter클래스파일 생성
*
* sitemesh의 기능 : 화면에 layout페이지 구현해 jsp페이지 적용하는 프레임워크
*
* filter의 기능 : servlet 이전에 먼저실행해 request나 response객체를 변경할수있는기능
*/
@WebFilter("/*") //url mapping /* : 모든요청시 필터적용
public class SiteMeshFilter extends ConfigurableSiteMeshFilter{
@Override
protected void applyCustomConfiguration(SiteMeshFilterBuilder builder) {
//layout페이지의 위치정보 설정
// /member/* :http://localhost:8080/model1Study/member/이하 모든 요청시
// /layout/layout.jsp페이지를 layout페이지로 설정
builder.addDecoratorPath("/member/*", "/layout/layout.jsp");
}
}
layout생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%String path = request.getContextPath(); %>
<!-- "/member/*" -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><sitemesh:write property="title" /></title>
<!--
<sitemesh:write property="title" /> :
작성한 페이지의 title태그값
<sitemesh:write property="head" /> :
작성한페이지의 head태그의값 (title태그 제외)
<sitemesh:write property='body'/>
작성한페이지의 body태그 값
-->
<link rel="stylesheet" href="<%=path %>/css/main.css">
<sitemesh:write property="head" />
</head>
<body>
<table><tr><td colspan="3" style="text-align: right">
<%
String login = (String)session.getAttribute("login");
if(login==null){ %>
<a href = "<%=path %>/member/loginForm.jsp">로그인</a>
<a href = "<%=path %>/member/joinForm.jsp">회원가입</a>
<%} else { %>
<%= login %>님.<a href="<%=path %>/member/logout.jsp">로그아웃</a>
<%} %>
</td></tr>
<tr><td width="15%" valign="top">
<a href="<%=path %>/member/main.jsp">회원관리</a><td>
<td colspan="2" style="text-align : left; vertical-align:top">
<sitemesh:write property='body'/></td></tr>
<tr><td colspan="3">구디아카데미</td></tr>
</table>
</body>
</html>
1-6) 회원목록조회
(관리자 admin만 접근이가능함)
<%@page import="model.member.Member"%>
<%@page import="java.util.List"%>
<%@page import="model.member.MemberDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- /webapp/member/list.jsp -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원목록</title>
</head>
<body>
<table><caption>회원목록</caption>
<tr><th>아이디</th><th>사진</th><th>이름</th><th>성별</th><th>전화</th>
<th> </th></tr>
<% String login = (String)session.getAttribute("login");
request.setCharacterEncoding("UTF-8");
//비회원 or 세션정보 공백
if(login==null || login.equals("")){
%>
<script>
alert("로그인");
loaction.href = "loginForm.jsp";
</script>
<%
//로그인을했고 로그인정보가 admin일 경우
}else if(login!=null && login.equals("admin")){
%>
<%
List<Member> list = new MemberDto().list();
for(Member m : list){
%>
<tr><td><a href="info.jsp?id="<%=m.getId() %>"><%=m.getId() %></a></td>
<td><img src="picture/<%=m.getPicture() %>" width="30" height="30"></td>
<td><%=m.getName() %></td><td><%=m.getGender()==1?"남":"여" %></td>
<td><%=m.getTel() %></td>
<td><a href="updateForm.jsp?id="<%=m.getId()%>">수정</a>
<%if(!m.getId().equals("admin")){%>
<a href="deleteForm.jsp?id="<%=m.getId()%>">강제탈퇴</a>
<%} %>
</td></tr>
<%} }else{ %>
<script>
alert("관리자만접근할수있습니다");
location.href="main.jsp";
</script>
<%} %>
</table>
</body>
</html>
1-7) updateForm
<%@page import="model.member.Member"%>
<%@page import="model.member.MemberDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!--
1 id파라미터조회
2. 로그인상태검증
로그아웃 : 로그인하세요=> loginForm.jsp 페이지로
로그인상태
- 다른 아이디정보 변경 불가능( 단 , admin은 다른 정보 변경가능)
=> 내 정보만 수정가능 . main.jsp페이지로이동
3.db에서 id의 레코드조회 . Member객체로리턴
4. 조회된내용을 화면에 출력하기
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>수정 전 화면조회(updateForm.jsp)</title>
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");
String login = (String)session.getAttribute("login");
if(login==null || login.equals("")){ //로그인이안돼있을때를 얘기
%>
<script>
alert("로그인해");
location.href="loginForm.jsp";
</script>
<%}else if(!id.equals(login) && !login.equals("admin")){ %>
<!-- 아이디와 세션정보가 다르고 admin이 아니라면 -->
<script>
alert("내정보만 수정가능");
location.href="main.jsp";
</script>
<%} else { //(login.equals("admin") || id.eqals(login))
Member mem = new MemberDto().selectOne(id);
%>
<form action="update.jsp" name="f" method="post" onsubmit="return input_check(this)">
<table><caption>회원정보수정</caption>
<tr><td rowspan="4" valign="bottom">
<input type="hidden" name="picture" value="<%=mem.getPicture()%>"><!-- 파라미터전달용(화면에보이지않음) -->
<img src="picture/<%=mem.getPicture()%>" width="100" height="120" id="pic"><br>
<font sizeie="1"><a href="javascript:win_upload()">사진수정</a></font>
</td><th>아이디</th><td><input type="text" name ="id" value="<%=mem.getId() %>" readonly></td></tr>
<tr><th>비밀번호</th><td><input type="password" name="pass" placeholder="<%=login+"의비밀번호"%>"></td></tr>
<tr><th>이름</th><td><input type="text" name="name" value="<%=mem.getName()%>"></td></tr>
<tr><th>성별</th><td><input type="radio" name="gender" value="1" <%=mem.getGender()==1?"checked":"" %>>남
<input type="radio" name="gender" value="2" <%=mem.getGender()==2?"checked":"" %>>여</td></tr>
<tr><th>전화번호</th><td colspan="2">
<input type="text" name="tel" value="<%=mem.getTel()%>"></td></tr>
<tr><th>이메일</th><td colspan="2">
<input type="text" name="email" value="<%=mem.getEmail()%>"></td></tr>
<tr><td colspan="3"><button>회원수정</button>
<%if(id.equals(login)){ %>
<button type="button" onclick="win_passchg()">비밀번호수정</button>
<% } }%>
</table>
</form>
<script type="text/javascript">
function win_upload(){
let op = "width=500,height=500 ,top=50 ,left=150";
open("pictureForm.jsp","",op);
}
</script>
</body>
</html>
admin으로 로그인 후 다른회원을 수정 시
admin이 아닌 회원이 자기자신을 탈퇴할때
update.jsp
updateForm.jsp에서
수정버튼을 누를 시 동작
(해당페이지는 뭘 하든 다른 페이지로 넘겨줄것임)
<%@page import="model.member.MemberDto"%>
<%@page import="model.member.Member"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- /webapp/member/update.jsp
1. 모든 파라미터를 Member 객체에 저장하기
2. 입력된 비밀번호와 db에 저장된 비밀번호 비교.
관리자로 로그인 한 경우 관리자비밀번호로 비교
본인 정보 수정시 본인의 비밀번호로 비교
불일치 : '비밀번호 오류' 메세지 출력후 updateForm.jsp 페이지 이동
3. Member 객체의 내용으로 db를 수정하기 : boolean MemberDao.update(Member)
- 성공 : 회원정보 수정 완료 메세지 출력후 info.jsp로 페이지 이동
- 실패 : 회원정보 수정 실패 메세지 출력 후 updateForm.jsp 페이지 이동
-->
<%
//1 모든 파라미터를 Member 객체에 저장하기
request.setCharacterEncoding("utf-8"); //한국어 등을 가져오면 글씨가깨질수있음
Member mem = new Member();
mem.setId(request.getParameter("id"));
mem.setPass(request.getParameter("pass"));
mem.setName(request.getParameter("name"));
mem.setGender(Integer.parseInt(request.getParameter("gender")));
mem.setTel(request.getParameter("tel"));
mem.setEmail(request.getParameter("email"));
mem.setPicture(request.getParameter("picture"));
//2 비밀번호를 위한 db의 데이터 조회. : login 정보로 조회하기
String login = (String)session.getAttribute("login");
MemberDto dao = new MemberDto();
Member dbMem = dao.selectOne(login);//로그인정보의쿼리를 가져옴
String msg = "비밀번호 오류";
String url = "updateForm.jsp?id=" + mem.getId();
//입력한 비밀번호와 로그인한 아이디의 비밀번호를 비교해
//즉 admin은 모두를변경할수있지만 admin의비밀번호를 입력해 변경이가능하다
if(mem.getPass().equals(dbMem.getPass())) {
if(dao.update(mem)) { // 회원 정보 수정 성공
msg = "수정 성공";
url = "info.jsp?id="+mem.getId();
} else {// 회원 정보 수정 실패
msg = "수정 실패";
}
}
%>
<script>
alert("<%=msg%>")
location.href="<%=url%>"
</script>
MemberDto 에 메서드추가
public boolean update(Member mem) {
Connection conn = DBConnection.getConnection();
PreparedStatement pstmt = null;
String sql = "update member set name=?,gender=?,tel=?,email=?,"
+ "picture=? where id=?";
try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, mem.getName());
pstmt.setInt(2, mem.getGender());
pstmt.setString(3, mem.getTel());
pstmt.setString(4, mem.getEmail());
pstmt.setString(5, mem.getPicture());
pstmt.setString(6, mem.getId());
return pstmt.executeUpdate() > 0;
//업데이트가 정상적으로됐다면 true 반환
} catch(Exception e) {
e.printStackTrace();
} finally {
DBConnection.close(conn, pstmt, null);
}
return false;
}
'JSP' 카테고리의 다른 글
| 부트캠프47일(pw찾기 , 비밀번호수정폼) (0) | 2025.04.09 |
|---|---|
| 부트캠프46일차 (delete , 사진등록 , id,pw찾기) (0) | 2025.04.08 |
| 부트캠프44일차(model1 ) (0) | 2025.04.04 |
| 부트캠프43일차(내장객체 , cookie ,JDBC) (0) | 2025.04.03 |
| 부트캠프42일차 (JSP내장객체 request, response,pageContext,session) (1) | 2025.04.02 |