반응형

# MVC02_01 JSP 구성요소 알아보기

  • MVC02 : JSP와 Model 만을 이용한 회원관리 만들기.

## MVC02 버전 신규 생성

  • File > New > Dynamic Web Project 클릭
  • Project Name은 MVC02 입력 후 Next > src 확인 후 Next > Context root : MVC02, Content directory : WebContent 확인 후 밑에 Generate web.xml deployment descriptor 체크 후 Finish.

## Context 등록

  • Servers > 톰캣 우클릭 > Add and Remove 클릭
  • Available 에 있는 MVC02 를 클릭 후 Add 눌러서 오른쪽 Configured로 이동 후 Finish.

## DB 연동 jar파일 가져오기

  • mysql-connector-java-5.1.31.jar 파일을 MVC02 > WebContent > WEB-INF > lib 에 추가.

## 필요한 패키지 가져오기

  • 기존 MVC01 에서 사용하던 kr.bit.db 패키지, kr.bit.model 패키지 MVC02로 가져오기.

## JSP (Java Server Page)

  • 자바 서버에서 구동되는 웹 페이지
  • Servlet도 자바로 된 웹 프로그래밍인데, Controller의 역할을 갖고있다.
  • JSP의 경우 View (프리젠테이션) 역할을 갖고 있다.

### JSP 생성

  • MVC02 > WebContent 우클릭 > New > JSP File 클릭
  • File name : test01.jsp 입력 후 Finish 클릭하면 아래와 같은 기본 골격이 만들어 진다.
<%@ 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>

</body>
</html>

### JSP 구성 요소 

  • <% %> 를 사용하는 스크립트적인 요소(=프로그래밍적 요소)

1. 지시자 : <%@  %> 형태이며, 지시자의 종류는 아래와 같다.

1. page 지시자
<%@page  %>

2. include 지시자
<%@include  %>

3. taglib 지시자
<%taglib  %>

2. 스크립트릿 : <%  %> 의 형태

3. 출력식 : <%=  %> 의 형태

4. 선언문 : <%!  %> 의 형태

5. JSP 주석 : <%--  --%> 의 형태

### JSP 이용한 1 ~ 10 까지의 총합

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
	int sum = 0;

	for ( int i = 1; i <= 10; i++ ) {
		sum += i;
	}
%>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
	<tr>
		<td>1 ~ 10까지의 총합</td>
		<td><%=sum %></td>
	</tr>
</table>
</body>
</html>

### JSP 이용한 s ~ e 까지의 총합 구하는 함수

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%-- 두 수 사이의 총합을 구하는 메서드 --%>
<%!
	public int hap(int s, int e) {
		int sum = 0;
	
		for ( int i = s; i <= e; i++ ) {
			sum += i;
		}
		
		return sum;
	}
%>
<%
	int sum = 0;

	for ( int i = 1; i <= 10; i++ ) {
		sum += i;
	}
%>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
	<tr>
		<td>1 ~ 10까지의 총합</td>
		<td><%=sum %></td>
	</tr>
	<tr>
		<td>55 ~ 350까지의 총합</td>
		<td><%=hap(55, 350) %></td>
	</tr>
</table>
</body>
</html>
반응형
반응형

# MVC01 정리 및 redirect 기법

  • 지금까지 한 MVC01 정리

## Controller

  • Controller가 통일된게 아니라, 각각의 Controller를 이용하여 진행 중.
  • 즉, 클라이언트의 요청에 따라 요청에 맞는 각각의 Controller가 대응. (추후 1개의 Controller로 통일 예정)

## DAO

  • DAO에 자바 코드와 SQL 코드가 섞인 형태.
  • 그래서 유지보수 등에 있어 용이하지 않음. (추후 SQL 분리 예정, 이때 DB와 연동에 필요한게 myBatis)

## redirect 기법

  • 예시 : 전화 돌리기

  • 작업 내역과 합쳐서 생각

반응형
반응형

# MVC01_13 회원정보 수정하기

  • 회원정보 수정 기능의 경우 form으로 묶어서 정보가 전송될수 있도록 할 예정

## 버튼 추가.

  • 수정하기, 취소, 리스트로 돌아가기 버튼 추가.
out.println("<tr>");
out.println("<td colspan='2' align='center'>");
out.println("<input type='submit' value='수정하기' class='btn btn-primary'/>");
out.println("<input type='reset' value='취소' class='btn btn-warning'/>");
out.println("<input type='button' value='리스트' class='btn'/>");
out.println("</td>");
out.println("</tr>");

## form 추가

  • form 추가 및 수정할 데이터 외에 기준이 될 데이터 input hidden 추가.
package kr.bit.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kr.bit.model.MemberDAO;
import kr.bit.model.MemberVO;

@WebServlet("/memberContent.do")
public class MemberContentController extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response)
							throws ServletException, IOException {
		int num = Integer.parseInt(request.getParameter("num"));
		
		MemberDAO dao = new MemberDAO();
		
		MemberVO vo = dao.memberContent(num);
		
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head>");
		out.println("<meta name='viewport' content='width=device-width, initial-scale=1'>");
		out.println("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>");
		out.println("<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>");
		out.println("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>");
		out.println("</head>");
		out.println("<body>");
		out.println("<form action='/MVC01/memberUpdate.do' method='post'>");
		out.println("<td><input type='hidden' name='num' value='" + vo.getNum() + "'></input></td>");
		out.println("<table border='1' class='table table-bordered'>");
		if (vo != null) {
			// vo에 값 존재 시 상세보기 페이지 생성
			out.println("<tr>");
			out.println("<td colspan='2'>" + vo.getName() + "의 상세보기</td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>번호</td>");
			out.println("<td>" + vo.getNum() + "</td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>아이디</td>");
			out.println("<td>" + vo.getId() + "</td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>비밀번호</td>");
			out.println("<td>" + vo.getPass() + "</td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>나이</td>");
			out.println("<td><input type='text' name='age' value='" + vo.getAge() + "'></input></td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>이메일</td>");
			out.println("<td><input type='text' name='email' value='" + vo.getEmail() + "'></input></td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>전화번호</td>");
			out.println("<td><input type='text' name='phone' value='" + vo.getPhone() + "'></input></td>");
			out.println("</tr>");		
		} else {
			out.println("<tr>");
			out.println("<td>일치하는 회원이 없습니다.</td>");
			out.println("</tr>");
		}
		out.println("<tr>");
		out.println("<td colspan='2' align='center'>");
		out.println("<input type='submit' value='수정하기' class='btn btn-primary'/>");
		out.println("<input type='reset' value='취소' class='btn btn-warning'/>");
		out.println("<a href='/MVC01/memberList.do'>리스트</a>");
		out.println("</td>");
		out.println("</tr>");		
		out.println("</table>");
		out.println("</form>");
		out.println("</body>");
		out.println("</html>");
	}

}

## MemberUpdateController.java Servlet 생성

package kr.bit.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kr.bit.model.MemberDAO;
import kr.bit.model.MemberVO;

@WebServlet("/memberUpdate.do")
public class MemberUpdateController extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) 
							throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		// 1. 파라미터 수집(VO)
		int num = Integer.parseInt(request.getParameter("num"));
		int age = Integer.parseInt(request.getParameter("age"));
		String email = request.getParameter("email");
		String phone = request.getParameter("phone");
	
		MemberVO vo = new MemberVO();
		vo.setNum(num);
		vo.setAge(age);
		vo.setEmail(email);
		vo.setPhone(phone);
	
		MemberDAO dao = new MemberDAO();
		
		int cnt = dao.memberUpdate(vo);
		
		if (cnt > 0) {
			response.sendRedirect("/MVC01/memberList.do");
		} else {
			throw new ServletException("not update");
		}
	}

}

## MemberDAO 에 회원정보 수정기능 추가

// 회원정보 수정기능
	public int memberUpdate(MemberVO vo) {
		String SQL = "update member set age = ?, email = ?, phone = ? where num = ?";
		getConnect();
		int cnt = -1;
		try {
			ps = conn.prepareStatement(SQL);
			ps.setInt(1, vo.getAge());
			ps.setString(2, vo.getEmail());
			ps.setString(3, vo.getPhone());
			ps.setInt(4, vo.getNum());
			
			cnt = ps.executeUpdate();
		} catch(Exception e) {
			e.printStackTrace();
		}finally {
			dbClose();
		}
		
		return cnt;
	}

## 작동 확인

  • 아래와같이 정상 수정 확인.

 

반응형
반응형

# MVC01_12 회원 상세보기

  • 회원 리스트에서 회원의 아이디를 클릭하면 상세보기 할 수 있도록 할 예정.

## MemberListController.java Servlet 수정

  • 회원 리스트 가져오는 항목에서 아이디에 태그 추가
out.println("<tr>");
out.println("<td>" + vo.getNum()+ "</td>");
// 상세보기
out.println("<td><a href='/MVC01/memberContent.do?num="+ vo.getNum()+"'>" + vo.getId()+ "</a></td>");
out.println("<td>" + vo.getPass()+ "</td>");
out.println("<td>" + vo.getName()+ "</td>");
out.println("<td>" + vo.getAge()+ "</td>");
out.println("<td>" + vo.getEmail()+ "</td>");
out.println("<td>" + vo.getPhone()+ "</td>");
out.println("<th><a href='/MVC01/memberDelete.do?num="+ vo.getNum()+"'>삭제</a></th>");
out.println("</tr>");

## MemberContentController.java Servlet 생성

  • kr.bit.controller 우 클릭 > New > Servlet 클릭 후 MemberContentController 이름 설정 후 Next > URL Mapping의 경우 memberContent.do 입력 후 Next > Service 만 클릭 하여 Finish.
package kr.bit.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kr.bit.model.MemberDAO;
import kr.bit.model.MemberVO;

@WebServlet("/memberContent.do")
public class MemberContentController extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response)
							throws ServletException, IOException {
		int num = Integer.parseInt(request.getParameter("num"));
		
		MemberDAO dao = new MemberDAO();
		
		MemberVO vo = dao.memberContent(num);
		
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head>");
		out.println("<meta name='viewport' content='width=device-width, initial-scale=1'>");
		out.println("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>");
		out.println("<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>");
		out.println("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>");
		out.println("</head>");
		out.println("<body>");
		out.println("<table border='1' class='table table-bordered'>");
		if (vo != null) {
			// vo에 값 존재 시 상세보기 페이지 생성
			out.println("<tr>");
			out.println("<td colspan='2'>" + vo.getName() + "의 상세보기</td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>번호</td>");
			out.println("<td>" + vo.getNum() + "</td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>아이디</td>");
			out.println("<td>" + vo.getId() + "</td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>비밀번호</td>");
			out.println("<td>" + vo.getPass() + "</td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>나이</td>");
			out.println("<td>" + vo.getAge() + "</td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>이메일</td>");
			out.println("<td>" + vo.getEmail() + "</td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>전화번호</td>");
			out.println("<td>" + vo.getPhone() + "</td>");
			out.println("</tr>");		
		} else {
			out.println("<tr>");
			out.println("<td>일치하는 회원이 없습니다.</td>");
			out.println("</tr>");
		}
		out.println("</table>");
		out.println("</body>");
		out.println("</html>");
	}

}

## MemberDAO.java 에 회원 정보 가져오는 기능 추가

// 회원 상세보기 기능
	public MemberVO memberContent(int num) {
		String SQL = "select * from member where num = ?";
		getConnect();
		MemberVO vo = null;
		try {
			ps = conn.prepareStatement(SQL);
			ps.setInt(1, num);
			rs = ps.executeQuery();
			
			if (rs.next()) {
				// 데이터 존재 시 회원 한명의 데이터 묶기(VO)
				num = rs.getInt("num");
				String id = rs.getString("id");
				String pass = rs.getString("pass");
				String name = rs.getString("name");
				int age = rs.getInt("age");
				String email = rs.getString("email");
				String phone = rs.getString("phone");
				
				vo = new MemberVO(num, id, pass, name, age, email, phone);
			}
		} catch(Exception e) {
			e.printStackTrace();
		} finally {
			dbClose();
		}
		
		return vo; 
	}

## 회원정보를 수정할 수 있는 형태로 변경

  • 기존 코드에 input 태그 추가하여 진행
package kr.bit.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kr.bit.model.MemberDAO;
import kr.bit.model.MemberVO;

@WebServlet("/memberContent.do")
public class MemberContentController extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response)
							throws ServletException, IOException {
		int num = Integer.parseInt(request.getParameter("num"));
		
		MemberDAO dao = new MemberDAO();
		
		MemberVO vo = dao.memberContent(num);
		
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head>");
		out.println("<meta name='viewport' content='width=device-width, initial-scale=1'>");
		out.println("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>");
		out.println("<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>");
		out.println("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>");
		out.println("</head>");
		out.println("<body>");
		out.println("<table border='1' class='table table-bordered'>");
		if (vo != null) {
			// vo에 값 존재 시 상세보기 페이지 생성
			out.println("<tr>");
			out.println("<td colspan='2'>" + vo.getName() + "의 상세보기</td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>번호</td>");
			out.println("<td>" + vo.getNum() + "</td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>아이디</td>");
			out.println("<td>" + vo.getId() + "</td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>비밀번호</td>");
			out.println("<td>" + vo.getPass() + "</td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>나이</td>");
			out.println("<td><input type='text' name='age' value='" + vo.getAge() + "'></input></td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>이메일</td>");
			out.println("<td><input type='text' name='email' value='" + vo.getEmail() + "'></input></td>");
			out.println("</tr>");
			out.println("<tr>");
			out.println("<td>전화번호</td>");
			out.println("<td><input type='text' name='phone' value='" + vo.getPhone() + "'></input></td>");
			out.println("</tr>");		
		} else {
			out.println("<tr>");
			out.println("<td>일치하는 회원이 없습니다.</td>");
			out.println("</tr>");
		}
		out.println("</table>");
		out.println("</body>");
		out.println("</html>");
	}

}

반응형

+ Recent posts