221026 - AJAX - JSON 데이터 교환 / MVC - 회원정보 조회, 회원 등록

지고르 2022. 10. 27. 14:05

AJAX

서버 → 클라이언트

JsonServlet02

package ajax_jsp.ex02;

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

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;

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

@WebServlet("/json2")
public class JsonServlet02 extends HttpServlet {


	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}

	private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		
		JSONObject object = new JSONObject();
		JSONArray memArray = new JSONArray();
		
		JSONObject memberInfo = new JSONObject();
		memberInfo.put("name", "홍길동");
		memberInfo.put("age", 50);
		memberInfo.put("hp", "010-1234-5678");
		memberInfo.put("email", "hong@gmail.com");
		memArray.add(memberInfo);
		
		memberInfo = new JSONObject();
		memberInfo.put("name", "김철수");
		memberInfo.put("age", 30);
		memberInfo.put("hp", "010-1111-2222");
		memberInfo.put("email", "kim@gmail.com");
		memArray.add(memberInfo);
		
		object.put("members", memArray);
		
		String jsonStr = object.toJSONString(); //JSON 데이터 -> 문자열
		
		out.print(jsonStr);

	}
    
}

"members" : [{"name":"홍길동",..},{"name":"김철수",..}]

json6.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON 자료형</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
	function fn_json(){
		$.ajax({
			type:"post",
			async:false,
			url:"${contextPath}/json2",
			success: function(data,textStatus){ //data : 문자열로 받은 JSON 데이터
				let jsonInfo=JSON.parse(data); //문자열-> 자스 객체/값
				let memInfo="<h2>회원정보</h2>";
				memInfo+="-------------<br>";
				
				for (var i in jsonInfo.members){
					memInfo+="이름 : " + jsonInfo.members[i].name +"<br>";
					memInfo+="나이 : " + jsonInfo.members[i].age +"<br>";
					memInfo+="핸드폰 : " + jsonInfo.members[i].hp +"<br>";
					memInfo+="이메일 : " + jsonInfo.members[i].email +"<br>";
				}
				
				$("#output").html(memInfo);
			},
			error: function(data, textStatus){}
		});
	}
</script>
</head>
<body>
	<input type="button" onclick="fn_json();" value="데이터를 서버로부터 전송받기">
	<div id="output"></div>
</body>
</html>

localhost~/json6.jsp 방문, 버튼 클릭

→ 자바스크립트 함수 실행

→ 서블릿과 AJAX 통신해 응답 데이터 가져옴

MVC

Model : 비즈니스 로직
View : 화면 구현
Controller : 사용자의 요청, 흐름 제어

MVC 동작 과정

클라이언트 요청 → 컨트롤러 (서블릿 / 로직 처리 ex. 어떤 상황에 어떤 함수 실행) → 모델 (DAO 클래스 / DB 연결, 쿼리 전송) → DB → 모델 (응답 데이터 받음) → 뷰 (JSP / 화면 구현) → 클라이언트

회원정보 조회

모델 => MemberDAO 클래스
컨트롤러 => MemberController 서블릿
뷰 => listMembers.jsp

※ 서블릿매핑주소 입력해야 정보 조회 가능 (JSP 주소 X)

=> 컨트롤러 통해 DB 관련 함수 실행되므로

MemberDAO

package jspMVC.ex01;

import java.sql.Connection;
import java.sql.Date;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;

public class MemberDAO {
	
	private DataSource dataFactory;
	private Connection con;
	private PreparedStatement ps;
	
	public MemberDAO() {
		try {
			Context ctx=new InitialContext();
			Context envContext=(Context)ctx.lookup("java:/comp/env");
			dataFactory=(DataSource) envContext.lookup("jdbc/oracle");
		}catch(Exception e){
			System.out.println("DB 연결 중 에러");
		}
	}
	
	public List<MemberVO> listMembers(){
		List<MemberVO> memberList = new ArrayList();
		
		try {
			con=dataFactory.getConnection();
			String query="select * from member_list order by joindate desc";
			System.out.println(query);
			
			ps=con.prepareStatement(query);
			ResultSet rs = ps.executeQuery();
			
			while(rs.next()) {
				String id = rs.getString("id");
				String pwd = rs.getString("pwd");
				String name = rs.getString("name");
				String email = rs.getString("email");
				Date joinDate = rs.getDate("joindate");
				
				MemberVO memberVO = new MemberVO(id, pwd, name, email, joinDate);
				
				memberList.add(memberVO);
			}
			rs.close();
			ps.close();
			con.close();
		} catch(Exception e) {
			System.out.println("쿼리 작성 중 에러");
		}
		return memberList;
	}

}

MemberVO

package jspMVC.ex01;

import java.sql.Date;

public class MemberVO {
	
	private String id;
	private String pwd;
	private String name;
	private String email;
	private Date joinDate;
	
	public MemberVO() {
		System.out.println("MemberVO 생성자 호출");
	}

	public MemberVO(String id, String pwd, String name, String email, Date joinDate) {
		super();
		this.id = id;
		this.pwd = pwd;
		this.name = name;
		this.email = email;
		this.joinDate=joinDate;
	}

	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public Date getJoinDate() {
		return joinDate;
	}
	public void setJoinDate(Date joinDate) {
		this.joinDate = joinDate;
	}
	
}

MemberController

package jspMVC.ex01;

import java.io.IOException;

import java.io.PrintWriter;
import java.util.List;

import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletConfig;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet("/mem.do")
public class MemberController extends HttpServlet {

	MemberDAO memberDAO;
	
	public void init(ServletConfig config) throws ServletException {
		memberDAO=new MemberDAO(); //모델 객체 생성
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}

	private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		List<MemberVO> memberList = memberDAO.listMembers();
		request.setAttribute("memberList", memberList);
		
		RequestDispatcher rd = request.getRequestDispatcher("/listMembers.jsp");
		rd.forward(request, response);
	}
	
}

listMembers.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원정보 출력</title>
</head>
<body>
	<h2 align="center">회원정보</h2>
	<table align="center" border="1">
		<tr align="center" bgcolor="beige">
			<th>아이디</th><th>비밀번호</th><th>이름</th><th>이메일</th><th>가입일</th>
		</tr>
		<c:choose>
			<c:when test="${empty memberList}">
				<tr>
					<td colspan="5" align="center">등록된 회원이 없습니다.</td>
				</tr>
			</c:when>
			<c:when test="${not empty memberList}">
				<c:forEach var="member" items="${memberList}">
					<tr align="center">
						<td>${member.id }</td>
						<td>${member.pwd }</td>
						<td>${member.name }</td>
						<td>${member.email }</td>
						<td>${member.joinDate }</td>
					</tr>
				</c:forEach>
			</c:when>
		</c:choose>
	</table>
	<p align="center"><a href="#">회원가입</a></p>
</body>
</html>

회원 등록

MemberController

package jspMVC.ex01;

import java.io.IOException;

import java.io.PrintWriter;
import java.util.List;

import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletConfig;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet("/member/*") // member/listMembers member/addMembers member/memberForm 등 여러 뷰와 데이터 교환
public class MemberController extends HttpServlet {

	MemberDAO memberDAO;

	public void init(ServletConfig config) throws ServletException {
		memberDAO=new MemberDAO(); //모델 객체 생성
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}

	private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		String nextPage=null;
		String action = request.getPathInfo(); //URL 확장이 있는 리소스에 대한 추가 경로 정보
		System.out.println("요청명 : " + action);
        
		if (action==null||action.equals("/listMembers.do")) { //추가 경로 없거나 정보조회 주소
			
                    List<MemberVO> memberList = memberDAO.listMembers();
			request.setAttribute("memberList", memberList);
			nextPage = "/listMembers.jsp";
            
		} else if (action.equals("/memberForm.do")) { //회원가입창 주소
			
                        nextPage="/memberForm.jsp";
            
		} else if (action.equals("/addMember.do")){ //회원가입 submit 주소
			//회원가입창에 작성한 정보 가져오기
                        String id = request.getParameter("id");
			String pwd = request.getParameter("pwd");
			String name = request.getParameter("name");
			String email = request.getParameter("email");
			
			MemberVO memberVO = new MemberVO(id,pwd,name,email); //멤버 객체 등록
			memberDAO.addMember(memberVO); //DB에 등록
			nextPage="/member/listMembers.do"; //정보조회 주소로 가기
            
		}
		
		RequestDispatcher rd = request.getRequestDispatcher(nextPage); ////해당 주소로 포워딩
		rd.forward(request, response);
	}
	
}

listMembers.jsp (전체 회원정보 조회)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<%
	request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원정보 출력</title>
</head>
<body>
	<h2 align="center">회원정보</h2>
	<table align="center" border="1">
		<tr align="center" bgcolor="beige">
			<th>아이디</th><th>비밀번호</th><th>이름</th><th>이메일</th><th>가입일</th>
		</tr>
		<c:choose>
			<c:when test="${empty memberList}">
				<tr>
					<td colspan="5" align="center">등록된 회원이 없습니다.</td>
				</tr>
			</c:when>
			<c:when test="${not empty memberList}">
				<c:forEach var="member" items="${memberList}">
					<tr align="center">
						<td>${member.id }</td>
						<td>${member.pwd }</td>
						<td>${member.name }</td>
						<td>${member.email }</td>
						<td>${member.joinDate }</td>
					</tr>
				</c:forEach>
			</c:when>
		</c:choose>
	</table>
	<p align="center"><a href="${contextPath}/member/memberForm.do">회원가입</a></p>
</body>
</html>

memberForm.jsp (회원가입 창)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
	<form action="${contextPath}/member/addMember.do" method="post">
		<h2 align="center">회원가입창</h2>
		<table align="center">
			<tr>
				<td width="200"><p align="right">아이디</p></td>
				<td width="400"><input type="text" name="id"></td>
			</tr>
			<tr>
				<td width="200"><p align="right">비밀번호</td>
				<td width="400"><input type="text" name="pwd"></td>
			</tr>
			<tr>
				<td width="200"><p align="right">이름</p></td>
				<td width="400"><input type="text" name="name"></td>
			</tr>
			<tr>
				<td width="200"><p align="right">이메일</p></td>
				<td width="400"><input type="text" name="email"></td>
			</tr>		
		</table>
		<input type="submit" value="회원가입하기">

	</form>
</body>
</html>

MemberDAO

package jspMVC.ex01;

import java.sql.Connection;
import java.sql.Date;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;

public class MemberDAO {
	
	private DataSource dataFactory;
	private Connection con;
	private PreparedStatement ps;
	
	public MemberDAO() {
		try {
			Context ctx=new InitialContext();
			Context envContext=(Context)ctx.lookup("java:/comp/env");
			dataFactory=(DataSource) envContext.lookup("jdbc/oracle");
		}catch(Exception e){
			System.out.println("DB 연결 중 에러");
		}
	}
	
	public List<MemberVO> listMembers(){
		List<MemberVO> memberList = new ArrayList();
		
		try {
			con=dataFactory.getConnection();
			String query="select * from member_list order by joindate desc";
			System.out.println(query);
			
			ps=con.prepareStatement(query);
			ResultSet rs = ps.executeQuery();
			
			while(rs.next()) {
				String id = rs.getString("id");
				String pwd = rs.getString("pwd");
				String name = rs.getString("name");
				String email = rs.getString("email");
				Date joinDate = rs.getDate("joindate");
				
				MemberVO memberVO = new MemberVO(id, pwd, name, email, joinDate);
				
				memberList.add(memberVO);
			}
			rs.close();
			ps.close();
			con.close();
		} catch(Exception e) {
			System.out.println("쿼리 작성 중 에러");
		}
		return memberList;
	}
	
	//회원가입
	public void addMember(MemberVO mem) {
		try {
			con=dataFactory.getConnection();
			
			String id = mem.getId();
			String pwd = mem.getPwd();
			String name = mem.getName();
			String email = mem.getEmail();
			
			String query="insert into member_list(id,pwd,name,email) values(?,?,?,?)";
			System.out.println(query);
			
			ps=con.prepareStatement(query);
			ps.setString(1, id);
			ps.setString(2, pwd);
			ps.setString(3, name);
			ps.setString(4, email);
			ps.executeUpdate();
			
			ps.close();
			con.close();
			
		}catch(Exception e) {
			System.out.println("DB 추가 중 에러");
		}
	}

}

MemberVO

package jspMVC.ex01;

import java.sql.Date;

public class MemberVO {
	
	private String id;
	private String pwd;
	private String name;
	private String email;
	private Date joinDate;
	
	public MemberVO() {
		System.out.println("MemberVO 생성자 호출");
	}

	public MemberVO(String id, String pwd, String name, String email) {
		super();
		this.id = id;
		this.pwd = pwd;
		this.name = name;
		this.email = email;
		this.joinDate=joinDate;
	}
	
	public MemberVO(String id, String pwd, String name, String email, Date joinDate) {
		super();
		this.id = id;
		this.pwd = pwd;
		this.name = name;
		this.email = email;
		this.joinDate=joinDate;
	}

	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public Date getJoinDate() {
		return joinDate;
	}
	public void setJoinDate(Date joinDate) {
		this.joinDate = joinDate;
	}
	
}