본문 바로가기
JSP/Java Script

2024_07_23_화~ 07_24_수

by 알케니브 2024. 7. 23.

오늘의 코딩순서

(폴더: och12)  0722 일지 참고

 

  • error.jsp + Member.class (현장 HW) + loginForm.jsp
  • loginPro.jsp + MemberDao.class (HW) 

 


<0722일지에 이어서 진행됨>

(폴더: och12) >>>어제의 MVC1에 이어서 하기 (//오늘 한 것은 전부 연결된 로직!!)

  • +++ main.jsp + memberCheck.jsp
  • joinForm.jsp + joinPro.jsp (현장 HW2) + MemberDao.class(현장HW)(어제 한거에 추가한거 맞음!)
  • confirmId.jsp + MemberDao.class (현장 HW3)
  • memberList.jsp + MemberDao.class (현장 HW4)
  • updateForm.jsp + MemberDao.class (현장 HW5) + updatePro.jsp + MemberDao.class (현장 HW6)
  • deleteForm.jsp + MemberDao.class (HW)

오늘의 코딩 포인트

(폴더: och12)

  • main.jsp >> 로그인 이후 회원정보 등이 적혀 있는 메인 페이지 만들기
    Tip) https://getbootstrap.com/docs/5.0/components/buttons/     부트스트랩 사이트 참고하기
    • 선생님의 tip!: 프로젝트 할 때는 이런 main.jsp와 error.jsp만 webapp같은 메인에 꺼내놓고,
      각 프로젝트 만드는 사람별로 폴더를 따로 만들어서 만들어 넣는것이 좋다
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="memberCheck.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<h2>회원관리 메인 메뉴</h2>
	<div class="btn-group">
		<a href="logOut.jsp"			class="btn btn-primary active btn-lg" aria-current="page"></a>
		<a href="joinForm.jsp"			class="btn btn-primary btn-sm">회원가입</a>
		<a href="joinForm3.jsp"			class="btn btn-primary btn-sm">회원가입(image)</a>
		<a href="memberList.jsp"		class="btn btn-primary btn-sm">회원명단</a>
		<a href="updateForm.jsp"		class="btn btn-primary btn-sm">회원정보수정</a>
		<a href="updateForm3.jsp"		class="btn btn-primary btn-sm">회원정보수정(image)</a>
		<a href="deleteForm.jsp"		class="btn btn-primary btn-sm">회원탈퇴</a>	
	</div>
	<div>
		<img alt="회원이미지1" src="image/back2.jpg"><br>
        <!-- 보통은 이미지 뿐 아니라 회원 리스트 화면도 같이 보여주는 곳 -->
	</div>
	<div id="footer">
		<h2>푸터</h2>
		<p> 모든 저작권은 중앙정보처리 회사에 있습니다.</p> 
		<p> 02-333-5678</p>
	</div>
</body>
</html>
  • memberCheck.jsp >> 아이디 입력과 공백 체크
<%
	String id = (String)session.getAttribute("id");	//아이디를 session에서 읽어서
	if	(id == null || id.equals(""))	{			//id가 공백이거나 없으면
		response.sendRedirect("loginForm.jsp");		//loginForm으로 보내겠다
	}
%>

 

btn-lg와 btn-sm의 차이

위의 세 화면 다 MVC의 View 이다


  • joinForm.jsp >> 회원가입 폼, MVC의 View의 역할을 함
    Tip)
    • 새로 열릴 창의 속성 정하기: target=
    • pattern
    • placeholder
    • winop() 함수
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	table	{
		background-color: skyblue;
	}
</style>
<script type="text/javascript">
	function chk() {
		if	(frm.passwd.value != frm.passwd2.value)	{
			alert("암호가 다릅니다");
			frm.passwd.focus();
			return false;
		}
		return true;
	}
	
	/* 여기서부터 height=300까지 추가
	
	>>새로 열릴 창의 속성 또는 창의 이름을 지정(target="_blank") 
    선택적인 값으로 기본값은 "_blank" . 사용 가능한 값을 다음과 같습니다.
	- _blank : 새 창에 열립니다. 이것이 기본값입니다.
	- _parent : 부모 프레임에 열립니다.
	- _self : 현재 페이지를 대체합니다.
	- _top : 로드된 프레임셋을 대체합니다.
	- name(임의의 이름) : 새 창이 열리고 창의 이름을 지정합니다. 동일한 이름에 다시 open() 을 하면 기존의 열린창의 내용이 바뀝니다. 
	              다른 이름을 사용하면 또다른 새창이 열립니다
	              
	  var popup = window.open(url, name, option);
	  var popup = window.open('팝업주소', '팝업창 이름', '팝업창 설정');
    */	
	function winop() {
		if	(!frm.id.value)	{
			alert("ID를 입력하고 사용하세요");
			frm.id.focus();
			return false;
		}
		window.open("confirmId.jsp?id="+frm.id.value, "kkk", "width=300 height=300")
		//팝업화면
    }
	
	
</script>
</head>
<body>
<h2>회원가입</h2>
	<form action="joinPro.jsp" name="frm" onsubmit="return chk()">
		<table border="1">
			<tr>
				<td>아이디</td>
				<td><input type="text"		name="id"	required="required">
					<input type="button"	value="중복확인"	onclick="winop()"></td>
			</tr>	
			<tr>
				<td>암호</td>
				<td><input type="password"	name="passwd"	required="required"></td>
			</tr>	
			<tr>
				<td>암호확인</td>
				<td><input type="password"	name="passwd2"	required="required"></td>
			</tr>	
			<tr>
				<td>이름</td>
				<td><input type="text"		name="name"		required="required"></td>
			</tr>	
			<tr>
				<td>주소</td>
				<td><input type="text"		name="address"	required="required"></td>
			</tr>	
			<tr>
				<td>전화번호</td>
				<td><input type="tel"		name="tel"		required="required"
					pattern="\d{2,3}-\d{3,4}-\d{4}"	placeholder="010-xxxx-xxxx"
					title="2,3자리-3,4자리-4자리">	<!-- 마우스를 갖다대면 도움말이 나타남 -->
				</td>
			</tr>
			<tr>
				<td><input type="submit" value="확인"></td>
				<td><input type="reset" value="취소"></td>
			</tr>	
		</table>
	</form>
	<a href="joinForm.jsp">회원가입</a>
	
</body>
</html>

암호와 암호 확인의 값이 다를때joinPro.jsp

  • joinPro.jsp (현장 HW) >> 회원가입 프로세스
<%@page import="och12.Member"%>
<%@page import="och12.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="error.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- // 현장 HW1: Bean 설정
	// Bean에 모든 parameter Setting -->
	<jsp:useBean id="member" class="och12.Member"/>
	<jsp:setProperty property="*" name="member"/>
	
<%
/* 	Bean이 아닌, 맨 처음 배운 방법 => 0715일지 참고
	String id = request.getParameter("id");
	String name = request.getParameter("name");
	Member member2 = new Member();
	member2.setId(id);
	member2.setName(name); */
	
	//간편한 방법
	MemberDao md = MemberDao.getInstance();
	int result = md.insert(member); 
	if	(result > 0)	{
%>
	<script type="text/javascript">
		alert("회원가입을 축하드립니다!");
		location.href = "loginForm.jsp";
	</script>
<%
	} else {
%>

	<script type="text/javascript">
		alert("로그인 실패");
		location.href = "joinForm.jsp";
	</script>
<% 
	} 
%>

</body>
</html>
  • MemberDao.class (현장 HW2) >> DAO역할, DB Connection 후 저장(Insert Method)
	//(0723)현장 HW2 => joinPro.jsp랑 연결
	// 0719일지 och11폴더 memberDao 참고
	public int insert(Member member) throws SQLException	{
		int result = 0;
		Connection conn = null;
		PreparedStatement pstmt = null;
		String sql = "insert into member2 values(?,?,?,?,?,sysdate)";
		
		try	{
			conn = getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, member.getId());
			pstmt.setString(2, member.getPasswd());
			pstmt.setString(3, member.getName());
			pstmt.setString(4, member.getAddress());
			pstmt.setString(5, member.getTel());
            //칼럼명이 명시되어 있지 않으면 DB의 열 이름 순서를 참고하기
			result = pstmt.executeUpdate();
		} catch(Exception e)	{
			System.out.println(e.getMessage());
		} finally {
			if	(pstmt != null)		pstmt.close();
			if	(conn != null)		conn.close();
		}
		return result;

 


  • confirmId.jsp >>아이디 중복확인 팝업 창으로 띄워줌
<%@page import="och12.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="error.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<%
	String id = request.getParameter("id");
%>
<script type="text/javascript">
	function wincl() {
		opener.document.frm.id.value="<%=id%>";	/* 새 창에 아이디 입력 */
		window.close();	/* 창 닫기 기능 */
	}
</script>
<body>
<%
	MemberDao md = MemberDao.getInstance();
	int result = md.confirm(id);
	
	if	(result == 0)	{	//존재하지 않는 사용자
%>
	<%=id %>는 사용할 수 있습니다<p>
	<input type="button" value="닫기" onclick="wincl()">
<%
	} else {	//존재하는 사용자 ==> 1
%>
	<%=id %>는 이미 존재하는 아이디입니다.<p>
	<form>	<!-- form action이 아닌 그냥 form으로 하면 로직이 순환하여 다시 위로 올라간다 -->
		아이디 : <input type="text" name="id"><p>
		<input type="submit" value="확인">
	</form>
<%
	}
%>	

</body>
</html>
  • MemberDao.class (현장 HW3)
//(0723)현장 HW3 => confirmId.jsp와 연결됨
	public int confirm(String id) throws SQLException	{
		int result = 0;
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = "select id from member2 where id=?";
		
		try	{
			conn = getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, id); 
			rs = pstmt.executeQuery();
			
			if	(rs.next())
				result = 1;
			else
				result = 0;
		} catch (Exception e) {
			System.out.println(e.getMessage());
		} finally {
			if	(rs != null)		rs.close();
			if	(pstmt != null)		pstmt.close();
			if	(conn != null)		conn.close();
		}
		return result;		
	}

 

중복아이디 팝업 창

↳ 나타난 팝업창에 중복되지 않은 ID를 넣고 확인을 누르면 사용가능 로직이 나타남
닫기를 누르면 자동으로 아이디에 중복되지 않은 ID값이 입력됨


  • memberList.jsp >> 홈페이지의 회원명단 누르면 사용자에게 회원정보 표시
<%@page import="och12.Member"%>
<%@page import="java.util.List"%>
<%@page import="och12.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="memberCheck.jsp" %>	<!-- 권한을 얻기 전 로그인페이지로 보내는 로직 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	tr:hover{ background-color: orange; }
	td		{ text-align: center; }
</style>
</head>
<body bgcolor="yellow">
<%
	MemberDao md = MemberDao.getInstance();
	List<Member> list = md.list();	/* List<Member>: 객체로 생각하기 */
	if	(list == null)	{
		out.println("없는 회원입니다");
	} else	{
%>
<h2>회원정보</h2>
	<table bgcolor="white" width="100%">
		<tr bgcolor="pink">
			<th>아이디</th>
			<th>이름</th>
			<th>주소</th>
			<th>전화번호</th>
			<th>가입일</th>	<!-- 보여주고 싶은것만 적어둠 -->
		</tr>
<%
	for(int i = 0; i < list.size(); i++)	{
		out.println("<tr><td>" + list.get(i).getId() +
					"</td><td>" + list.get(i).getName() +
					"</td><td>" + list.get(i).getAddress() +
					"</td><td>" + list.get(i).getTel() +
					"</td><td>" + list.get(i).getReg_date()+ 
					"</td></tr>"
					);
	}

%>		
		
	</table>
<%
	}
%>
</body>
</html>
  • MemberDao.class (현장 HW4) >>0717일치 AllayList참고
    DAO 역할, DB Connection 후 쿼리 설정 후 결과 값 List로 생성(List <Member> list() 메서드)
    Tip)
    • 0605일지 Map 참고!!!
	//(0723)현장 H4 => memberList.jsp랑 연결됨
	public List<Member> list() throws SQLException	{
		List<Member> list = new ArrayList<Member>();
				//객체 선언 뒤에 ()를 안치면 함수로 인식하지 못해서 오류남
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = "select * from member2";
		
		try	{
			conn = getConnection();
			pstmt = conn.prepareStatement(sql);
			rs = pstmt.executeQuery();
			
			if	(rs.next())	{
				do	{
					Member member = new Member();
					member.setId(rs.getString(1));
					member.setPasswd(rs.getString(2));
					member.setName(rs.getString(3));
					member.setAddress(rs.getString(4));
					member.setTel(rs.getString(5));
					member.setReg_date(rs.getDate(6));
					list.add(member);
				} while(rs.next());
	
			}
		} catch (Exception e) {
			System.out.println(e.getMessage());
		} finally {
			if	(rs != null)		rs.close();
			if	(pstmt != null)		pstmt.close();
			if	(conn != null)		conn.close();
		}
		return list;		

	}

회원명단 선택하면 나오는 화면

 


  • updateForm.jsp >> 사용자가 보는 회원정보 수정화면 폼
    Tip)
    • contextpath(): 
<%@page import="och12.Member"%>
<%@page import="och12.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="error.jsp" %>
<%@ include file="memberCheck.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	table	{
		background-color: pink;
	}
</style>
</head>
<body>
<%
	MemberDao md = MemberDao.getInstance();
	Member member = md.select(id);
    //맨 위에서 include로 memberCheck를 걸어주었기 때문에,
	// id를 따로 선언하지 않아도 여기서 걸어주는 것이 가능함
	String context = request.getContextPath();	//Tomcat Meta Data
%>

<h2>회원정보 수정</h2>
	<form action="updatePro.jsp">
		<table border="1" id="table">
			<tr>
				<td>아이디</td>
				<td><%=id %><input type="hidden" class="id" name="id" id="id"
							value="<%=member.getId() %>"></td>	
                            <!-- 사용자가 건들거나 오류가 날 수 있으므로 hidden으로 걸어두기 -->
						<!-- %와 >사이에 빈공간이 있으면 primary key로 들어가 오류가 난다 -->
			</tr>
			<tr>
				<td>비밀번호</td>
				<td><input type="password" name="passwd" id="passwd" required="required"></td>
			</tr>	
			<tr>
				<td>이름</td>
				<td><input type="text" name="name" required="required"
					value="<%=member.getName()%>"></td>
			</tr>	
			<tr>
				<td>주소</td>
				<td><input type="text" name="address" required="required"
					value="<%=member.getAddress()%>"></td>
			</tr>	
			<tr>
				<td>전화번호</td>
				<td><input type="text" name="tel" required="required"
					pattern="\d{2,3}-\d{3,4}-\d{4}" value="<%=member.getTel()%>"></td>
			</tr>	
			<tr>
				<td>날짜</td>
				<td><%=member.getReg_date()%></td>
				<!-- 파라미터로 저장이 안되서 EL표기법으로는 표기가 어렵다 -->
			</tr>	
			<tr>
				<td><input type="submit" value="확인"></td>
				<td><input type="reset" value="취소"></td>
			</tr>
		</table>
	</form>
	
</body>
</html>
  • MemberDao.class (현장 HW5) >> DAO 역할, DB Connection 후 조회(select 메서드)
    Tip)
    • get만 사용하는 것은 SQL에서 가져오기만 하면 되기 때문에 get만 사용하고,
      where을 이용하여 특정 데이터 값을 가져오기 위해서는 set과 get을 같이 사용해야 한다
	//(0723)현장 H5 => updateForm.jsp와 연결됨
	public Member select(String id) throws SQLException {
		Member member = new Member();
		Connection conn = null; 
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = "select * from member2 where id=?";
		
		try	{
			conn = getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, id);		
			//이걸 선언 안하면, 위의 string id가 들어갈 자리가 없어짐

			rs = pstmt.executeQuery();
			
			if (rs.next())	{
				member.setId(rs.getString(1));;
				member.setPasswd(rs.getString(2));
				member.setName(rs.getString(3));
				member.setAddress(rs.getString(4));
				member.setTel(rs.getString(5));
				member.setReg_date(rs.getDate(6));
			}
			
		} catch (Exception e)	{
			System.out.println(e.getMessage());
		} finally {
			if (rs != null)		rs.close();
			if (pstmt != null)	pstmt.close();
			if (conn != null)	conn.close();
		}
		return member;	
		
	}

  • updatePro.jsp >> 회원정보 수정 프로세스
<%@page import="och12.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="memberCheck.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<jsp:useBean id="member" class="och12.Member"></jsp:useBean>
	<!-- 윗 줄은 Member member = new member과 같은 뜻 -->
	<jsp:setProperty property="*" name="member"/> <!-- 위의 member을 여기로 받아옴 -->
<%
	MemberDao md = MemberDao.getInstance();
    /* 위의 member 객체를 update에 넣음 */
	int result = md.update(member);
	//MemberDao의 결과값을 여기 윗줄에 받아옴
	if (result > 0)	{ 
%>	
	<script type="text/javascript">
		alert("사용자 정보 수정 완료");
		location.href="main.jsp";
	</script>
<%
	} else {
%>
	<script type="text/javascript">
		alert("오류입니다");
		history.back();
	</script>
<%
	}
%>	
</body>
</html>
  • MemberDao.class (현장 HW6) >> DAO 역할, DB Connection 후 수정(update 메서드)
	//(0723)현장 H6 => updatePro.jsp와 연결됨
	public int update(Member member) throws SQLException {
		int result = 0;
		Connection conn = null;
		PreparedStatement pstmt = null;
		System.out.println("getId->"+member.getId());
		System.out.println("getPasswd->"+member.getPasswd());
		System.out.println("getName->"+member.getName());
		System.out.println("getAddress->"+member.getAddress());
		System.out.println("getTel->"+member.getTel());

		String sql = "update member2 set passwd=?, name=?, address=?, tel=? "
						+ " where id=?";
		System.out.println("sql->"+sql);
				
		try	{
			conn = getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, member.getPasswd());
			pstmt.setString(2, member.getName());
			pstmt.setString(3, member.getAddress());
			pstmt.setString(4, member.getTel());
			pstmt.setString(5, member.getId());
			result = pstmt.executeUpdate();
			System.out.println("result->"+result);
			
		} catch (Exception e)	{
			System.out.println(e.getMessage());
		} finally {
			if (pstmt != null)	pstmt.close();
			if (conn != null)	conn.close();
		}
		return result;	
		
	}

 


  • deleteForm.jsp >> 사용자가 보는 탈퇴 화면, 삭제 폼
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>탈퇴하려면 암호를 입력하시오</h2>
	<form action="deletePro.jsp">
		<fieldset>
			<label for="passwd">암호 : </label>
			<input type="password" id="passwd"><p>
			<input type="submit" value="확인">
		</fieldset>	
	</form>
	
</body>
</html>

  • deletePro.jsp >> 사용자 정보 삭제 프로세스
<%@page import="och12.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="error.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
	String passwd = request.getParameter("passwd");
	MemberDao md = MemberDao.getInstance();
	System.out.println("DeletePro id->"+id);
	
	int result = md.delete(id, passwd);
	
	if(result == 1)	{
		session.invalidate();
	
%>
	<script type="text/javascript">
		alert("탈퇴되었습니다.");
		location.href="main.jsp";
	</script>
<%
	} else if (result == 0)	{
%>
	<script type="text/javascript">
		alert("비밀번호가 틀렸습니다.");
		history.go(-1);
	</script>
<%
	} else {
%>
	<script type="text/javascript">
		alert("아이디가 틀렸습니다.");
		history.go(-1);
	</script>

<%
	}
%>

</body>
</html>
  • memberDao.class >> DAO 역할, DB Connection 후 삭제 (delete 메서드)

탈퇴 화면
삭제 전과 삭제 후

 

++ 0724 일지

프로젝트 배포 방법

1. och12에서 우클릭 > export > war만들기

och12.war
7.50MB

 

2. loginForm.jsp 실행하면 크롬에 뜨는 서버 주소 복사하기

http://localhost:8181/och12/loginForm.jsp

 

3. jsp src17 폴더에 가서 och12.war 파일이 있는지 체크한뒤 복사

경로:  C:\jsp\jspSrc17

 

4. 파일을 Tomcat 폴더의 webapps 폴더에 붙여넣기

경로:   C:\Program Files\Apache Software Foundation\Tomcat 10.1\webapps

 

5. 시작 창의 검색 창에서 서비스(혹은 service) 검색해서 서비스 설정 창 띄우기

6. Apache Tomcat으로 시작하는 파일 서비스 시작 누르고 로딩 기다리기

 

7. 복사했던 서버 주소에 다시 접속하면, 이클립스 없이도 사용자가 접속할 수 있는 loginForm 창이 나타남!

 


질문목록

1. updatePro.jsp의 memberDao는 왜 resultSet을 안쓰는가? >>0611일지 참고

↳ SQL 조회할때만 사용하는 select나 show문에서는 조회를 하기 위해 executeQuery()문을 이용함
사용한 질의가 성공할 경우 결과물로 ResultSet을 반환함
즉, updatePro에 사용한 update문은 물론, insert문과 delete문도 executeQuery()문과 resultSet을 사용하지 않는다
대신 executeUpdate()를 사용한다

 


수업교재

15. MVC 모델

↳ Model/View/Controller의 약자이며, MVC는 이 세 가지로 이루어진 'Design Pattern'을 말함



1. MVC 1 모델과 MVC 2 모델의 차이 

  • JSP 규격서의 초기버전에서 소개하고 있는 설계모델(design model)인 Model 1과 Model 2는 웹애플리케이션이 해야할 일을 <데이터 입력, 데이터 처리, 데이터 출력> 세 가지로 구분하여 모듈화함
    1. MVC 1
      • 비교적 간단한 웹애플리케이션에 적합한 설계모델
      • View와 Controller가 분리되지 않은 형식의 Model 1 구조를 말함
        • Controller: 사용자의 입력 처리화 흐름 제어를 담당함
        • Model: 비즈니스 영역의 로직을 처리함
        • View: 비즈니스 영역에 대한 프레젠테이션 뷰, 즉 사용자가 보게 될 결과화면을 담당함
      • 모델1(Model 1)구조에서는 크게 JSP랑 Java Bean(model)으로 구성됨
      • DB정보 웹브라우저에 응답(response) 해주는처리에 대해 JSP page 단독으로 처리하는 구조
      • 스크립틀릿 사용, 자바로직과 화면 로직이 함께 사용됨
      • 순서
        1. 웹브라우저(사용자)의 요청(request)에 대한 응답을 Controller에서 받음
        2. 컨트롤러가 Model(비즈니스 관련된 기능을 제공함)을 이용하여 사용자의 request를 처리하기 시작
        3. Model이 요청에 따라 데이터 베이스에 접근하여 데이터를 처리하고, 알맞은 비즈니스 로직을 수행함
        4. Controller은 이 처리된 요청을 통해 사용자에게 알맞는 결과 화면, 즉 View를 선택함
        5. 이렇게 선택된 View는 Controller를 통해 데이터를 처리한 뒤 사용자에게 응답(response)하여 결과화면을 보여줌
    2. MVC 2
      • 비교적 복잡한 웹애플리케이션에 적합한 설계모델
      • Model 1 구조에서 View와 Controller를 분리한 구조의 모델
      • 모델2(Model 2)구조에서는 요청(request)처리, 데이터접근(data access), 비즈니스 로직 (business logic)을 포함하고 있는 컨트롤 컴포넌트(control component) 와 뷰 컴포넌트 (view component)는 엄격히 구분함
      • 스크립틀릿 사용 X
    3. MVC 1과 MVC 2의 차이
      • MVC1
        1. 클라이언트(웹 브라우저)의 요청을 JSP 페이지가 전부 받아서, Java Bean이나 Service 클래스를 사용하여 요청한 작업을 처리하고 그 결과를 출력함
        2. 장점: 쉽게 페이지를 작성할 수 있기 때문에 개발속도가 빠름
        3. 단점: JSP 페이지 내에서 비즈니스 로직을 처리하기 위한 코드와 웹 브라우저에 결과를 보여주는 코드가 함께 존재하여 재사용이 힘들고 읽기도 힘들어 가독성이 떨어지고 유지보수가 어려움
      • MVC 2
        1. 웹 브라우저의 요청을 하나의 Servlet이 수행하며, Servlet이 웹 브라우저의 요청을 받아 그 결과를 View로 보여줄 것인지, Model로 보내줄 것인지 결정함 => 이를 JSP 페이지로 전송(forwarding)시킴
        2. 여기서 View 페이지느 ㄴ사용자에게 보여주는 역할만 담당하고, 실질적인 기능은 Model에서 담당함
        3. 클라이언트의 요청, 응답, 비즈니스 로직 처리부분을 모듈화 시킴
        4. 장점: HTML과 Java 소스 처리작업의 분리로 인해 유지보수 및 확장이 용이함
        5. 단점: 구조를 설계하는 시간이 많이 소요되어 개발기간이 증가함

2. MVC패턴(Model-View-Controller pattern)

1. MVC(Model-View-Controller)

  • MVC(Model-View-Controller) 구조는 전통적인GUI(Graphic User interface) 기반의 어플리케이션을 구현하기 위한Architecture Style
  • MVC 구조는 사용자의 입력을 받아서, 그 입력 혹은 이벤트에 대한 처리를 하고, 그 결과를 다시 사용자에게 표시하기위한 최적화된 설계를 제시함

2.뷰(View)

  • 화면에 내용을 표출하는 역할을 담당함
  • 데이터가 어떻게 생성되고, 어디서 왔는지에 전혀 관여하지 않음. 단지 정보를 보여주는 역할만을 담당
  • JSP 기반의 웹어플리케이션에서는 JSP페이지가 뷰(View)에 해당함

3. 컨트롤러(Controller)

  • 어플리케이션의 흐름을 제어하는 것으로 뷰(View)와 모델(Model)사이에서 이들의 흐름을 제어함
  • 컨트롤러(Controller)는 사용자의 요청을 받아서 모델(Model)에 넘겨주고, 모델(Model)이 처리한 작업의 결과를 뷰(View)에 보내주는역할을 함
  • JSP 기반의 웹어플리케이션에서는 보통 서블릿(Servlet)을 컨트롤러(Controller)로 사용함

 


오늘의 숙제

  • deleteForm.jsp 과 연결된 MemberDao.class

<숙제하다가 든 의문점들>

1. check 함수를 활용하라는 힌트를 얻었지만 활용할 줄 몰라 사용하지 못했다. 어떻게 선언하여 사용해야 하는가?

여기서 check 메서드는 사용자의 id와 passwd가 일치하는지 확인할 때 사용한다.
return = check(id, passwd);라고 선언함으로서, 일치하는지 확인한 이후 그 결과를 result에 저장한다

 

+++ check 함수

  • JSP에서 "check" 함수는 일반적으로, Java 코드를 포함하여 다양한 작업을 수행할 수 있는 사용자 정의 함수로 구현할 수 있음
  • 주로 유효성 검사를 위해 사용됨

2. result와 check를 연결후 어떻게 활용해야 하는가?

위에서 선언하여 result에는 id와 passwd값이 저장되었다. 그러므로 result를 활용하는 것은 check함수를 활용하는 것이나 마찬가지이다


 

3. select문이 아니라 resultSet을 이용할 수 없어서, rs(next())를 사용할 수 없어 if문을 걸어줄수 없었다. 어떻게 걸어줘야 하는가?

resultSet을 걸어준 이유는 conn, pstmt의 객체를 받아와 executeQuery를 이용해 조회를 하고, 조건을 걸어 값을 넣기 위함이었다

delete문이라 resultSet을 사용할 수 없다고 해서 조건문을 걸지 못하는 일은 없다. try문 밖에서 선언하고 나면 충분히 조건을 돌릴 수 있는 선언문이 된다


4. loginPro.jsp와 연결된 memberDao.class를 보면 resultSet을 이용하여 String dbPasswd = rs.getString(1);이라고 선언 후, 이를 이용한 if문을 조건으로 걸어 쉽게 select로 조회할 수 있었다. resultSet이 없을때는 어떻게 db의 데이터 열과 연결 및 선언을 해야 하는가?

  insert와 update로 예를 들어보자. DAO에서 sql 선언후 바로 try 조건문을 걸어준다. conn과 pstmt를 다른 것과 똑같이 try문 안에 넣어 준 뒤, pstmt를 setstring을 이용하여 index를 매긴다. 그리고 result로 선언하여 그 값들을 result에 넣어준다


5. 첫 번째 if문에서 (result == 1)의 조건을 건 후 돌아가야할 동작을 구현해야하는데, delete를 발동시킬 동작을 찾지 못했다. delete를 발동시키는 조건문은 어떻게 쓰는가?

 나는 if문을 try 안에 넣으려 했기 때문에 조건을 짤 수 없었던 것이다. 더하여 if문의 조건도 잘못되었다

try 밖에 짠 뒤 

 


<숙제 결과를 본 이후의 질문>

if ( result != 1 )
			return result;

1. 위의 로직은 result 값을 어떻게 활용하는 것인가? 그리고 왜 try문 안이 아닌 밖에 선언하는가?

  check 함수를 재사용하고 try문 앞에 if ( result != 1 )를 걸어주면 (result == -1)과 (result == 0)을 둘 다 포함하는 조건문이 된다. 즉, 맞지 않는 값(틀린 id나 틀린 passwd)를 입력한 사용자를 거를 수 있는 조건문이 된다
그 이후 (result == 1)에 해당하는 값은  아래에 try문을 걸어준다. 그리고 conn과 pstmt와 result와 executeUpdate를 차례로 객체를 선언하고 값을 저장한다.

catch 블록은 여기서 발생하는 예외를 잡아내고 메시지를 출력한다. 

finally 블록은 PreparedStatement와 Connection 객체를 닫아준다

마지막으로 괄호 밖의 return result이 삭제 결과를 반환해준다


  • 내가 한 것 (다 못함)
	//(0723)HW => deletePro.jsp와 연결됨
	public int delete(String id, String passwd)	{
		int result = 0;
		Connection conn = null;
		PreparedStatement pstmt = null;
		String sql = "delete from member2 where id=? AND passwd=?";
		
		try	{
			conn = getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, id);
			pstmt.executeUpdate();
			
			
			result = check(id, passwd);		//int result = md.delete(id, passwd);
			String id = 
			
		/*	//ID 승인
			if	(rs.next())	{
				String dbPasswd = rs.getString(1);
				if	(dbPasswd.equals(passwd)) 
					result = 1;
				else
					result = 0;	
			}	else
					result = -1;
			*/
			
			if ( result == 1 )	{
				String dbid = check(1, id);
				if(dbid.equals(id))
					result = 1;
					
				else ( )
					result = 0;
	
			}else
				result = (-1);
			
			} catch (Exception e)	{
				System.out.println(e.getMessage());
			
			} finally {
				if (pstmt != null)		pstmt.close();
				if (conn != null)		conn.close();
		
		} return result;

 

  • 정답
//(0723)HW => deletePro.jsp와 연결됨
	public int delete(String id, String passwd) throws SQLException	{
		int result = 0;
		Connection conn = null;
		PreparedStatement pstmt = null;
		String sql = "delete from member2 where id=?";
		
		result = check(id, passwd);		
        	//deletePro.jsp의 int result = md.delete(id, passwd); 참고
		if ( result != 1 )
			return result;
		
		try	{
			conn = getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, id);
			result = pstmt.executeUpdate();
	
		} catch (Exception e)	{
				System.out.println(e.getMessage());
			
		} finally {
			if (pstmt != null)		pstmt.close();
			if (conn != null)		conn.close();
		
		} 
		return result;
	
	}

'JSP > Java Script' 카테고리의 다른 글

2024_07_25_목  (0) 2024.07.26
2024_07_24_수  (0) 2024.07.24
2024_07_22_월  (0) 2024.07.22
2024_07_19_금 ⭐⭐⭐  (0) 2024.07.19
2024_07_18_목  (0) 2024.07.18