[웹] JSP 예제(MySQL과 연동, 웹 브라우저 출력)(1)

프로그래밍

[웹] JSP 예제(MySQL과 연동, 웹 브라우저 출력)(1)

RainIron 2021. 6. 22. 18:14

※ 개요

요구사항 1) 리스트 요청 URL 제작 -> 서블릿 실행 -> 서비스 -> DAO -> List<MemberVO> -> memList.jsp -> 웹 브라우저 표시

요구사항 2) List가 나온 페이지에서 '이름'을 클릭하면 리스트 대신, 해당하는 사람의 정보만 출력

요구사항 3) 상세정보 창에서 수정버튼을 누르면 수정할 수 있는 폼이 나오고, 완료를 누르면 반영된 리스트 출력

요구사항 1) 리스트 요청 URL 제작 -> 서블릿 실행 -> 서비스 -> DAO -> List -> memList.jsp -> 웹 브라우저 표시

1. 리스트 요청 URL 제작(서블릿 제작)

http://localhost/MyWeb/mem?cmd=list
- mem: MemberServlet
- 요청 URL을 입력했을 때 해당 서블릿이 실행되는지 확인

* MemberServlet.java

package com.tjoeun.servlet;

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;

@WebServlet("/mem")
public class MeberServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=utf-8");
		System.out.println("MemberServlet.java 실행 됨");
		
	}

}

2. 서비스 제작

- cmd=list라면 dao 를 통해 List<MemVO>를 가져온다.

* MemSvc.java

package com.tjoeun;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

public class MemSvc {
	private HttpServletRequest request;
	
	public MemSvc() {}

	public MemSvc(HttpServletRequest request) {
		setRequest(request);
	}
	public HttpServletRequest getRequest() {
		return request;
	}

	public void setRequest(HttpServletRequest request) {
		this.request = request;
	}
	
	public String getPath() {
		String cmd = request.getParameter("cmd");
		
		if(cmd.equals("list")) {
			//showList();		
			String path = "/MemList.jsp";
			request.setAttribute("memlist", getList());
			return path;
		}
		
		return null;
	}
	
	// Debugging Code
	public void showList() {
		MemDAO dao = new MemDAO();
		List<MemVO> memlist = dao.getList();
		
		for(var i:memlist) {
			System.out.println(i.getNum()+ " " + i.getName());
		}
	}
	
	public List<MemVO> getList() {
		MemDAO dao = new MemDAO();
		return dao.getList();
	}
}

3. DAO, VO 제작

* MemDAO.java

package com.tjoeun;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class MemDAO {
	
	static String url = "jdbc:mysql://localhost:3306/mydb?characterEncoding=UTF-8&serverTimezone=UTC&SSL=false";
	static Connection conn;
	static PreparedStatement pstmt;
	static ResultSet rs;
	static int cnt = 0;
	
	public MemDAO() {}
	
	public static Connection getConn() {
		try {
			conn = DriverManager.getConnection(url, "root", "*****");
			return conn;
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}
	
    public List<MemVO> getList() {
    	conn = getConn();
		String sql = "SELECT * FROM member";
		List<MemVO> list = new ArrayList<>();
		try {
			pstmt = conn.prepareStatement(sql);
			rs = pstmt.executeQuery();
			
			while(rs.next()) {
				int num = rs.getInt("num");
				String name = rs.getString("name");
				String phone = rs.getString("phone");
				String email = rs.getString("email");
				
				list.add(new MemVO(num, name, phone, email));
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} 
		return list;
    }
}

* MemVO.java

package com.tjoeun;

public class MemVO {
	private int num;
	private String name;
	private String phone;
	private String email;
	
	public MemVO(){}
	MemVO(int num, String name, String phone, String email){
		setNum(num);
		setName(name);
		setPhone(phone);
		setEmail(email);
	}
	
	public int getNum() {
		return num;
	}
	public void setNum(int num) {
		this.num = num;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	
}

4. memList.jsp 제작

<%@page import="java.util.List"%>
<%@page import="com.tjoeun.MemVO"%>

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
		List<MemVO> list = (List<MemVO>)request.getAttribute("memlist");
%>
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>
		Member List
	</title>
	<script
	  src="https://code.jquery.com/jquery-3.6.0.min.js"
	  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
	  crossorigin="anonymous"></script>
	</head>
	<style>
	table {width: 400px; border: 1px solid black; border-spacing: 0px; border-collapse: collapse; margin: 0px auto;}
	tr {border-bottom: 1px solid black;}
	th, td{text-align: center; border-right: 1px solid black;}
	tr:nth-child(even) {background-color: #f2f2f2;}
	</style>
<body>
	<h1>[Member List 목록표]</h1>
	<table>
		<tr><th>번호</th><th>이름</th><th>전화</th><th>메일</th>
	<%
		for(int i=0;i<list.size();i++){
			MemVO tmp = list.get(i);
			%> 
				<tr>
					<td><%=tmp.getNum()%></td>
					<td><%=tmp.getName()%></td>
					<td><%=tmp.getPhone()%></td>
					<td><%=tmp.getEmail()%></td>
				</tr>
			<%
		}
	%>
	</table>
</body>
</html>

요구사항 2) List가 나온 페이지에서 '이름'을 클릭하면 리스트 대신, 해당하는 사람의 정보만 출력

회원 이름 클릭 -> 클릭한 사람 정보 출력

1. 리스트의 이름 항목에 링크 생성(클릭하면 서블릿에 연결되서 결국 jsp로 돌아오는 과정을 거쳐야 함)

- MemList.jsp 수정(이름 항목에 a 태그 생성)

<td><a href = "/MyWeb/mem?cmd=selectName&num=<%=tmp.getNum()%>"><%=tmp.getName()%></a></td>

2. cmd = selectName에 대한 조건문 추가

- MemSvc.java 수정(조건 추가)

public String getPath() {
		String cmd = request.getParameter("cmd");
		
		if(cmd.equals("list")) {
			//showList();		
			String path = "/MemList.jsp";
			request.setAttribute("memlist", getList());
			return path;
		}
		else if(cmd.equals("selectName")) {
			int num = Integer.parseInt(request.getParameter("num"));
			List<MemVO> list = getList();
			request.setAttribute("member", list.get(num-1));
			String path = "/Member.jsp";
			return path;
		}
		
		return null;
	}

3. Member.jsp 생성

<%@page import="java.util.List"%>
<%@page import="com.tjoeun.MemVO"%>

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
		MemVO tmp = (MemVO)request.getAttribute("member");
%>
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>
		Member List
	</title>
	<script
	  src="https://code.jquery.com/jquery-3.6.0.min.js"
	  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
	  crossorigin="anonymous"></script>
	</head>
	<style>
	table {width: 400px; border: 1px solid black; border-spacing: 0px; border-collapse: collapse; margin: 0px auto;}
	tr {border-bottom: 1px solid black;}
	th, td{text-align: center; border-right: 1px solid black;}
	tr:nth-child(even) {background-color: #f2f2f2;}
	</style>
<body>
	<table>
		<caption><h1>[Member 상세정보]</h1></caption>
		<tr><th>번호</th><th>이름</th><th>전화</th><th>메일</th>
				<tr>
					<td><%=tmp.getNum()%></td>
					<td><a href = "/MyWeb/mem?cmd=selectName&num=<%=tmp.getNum()%>"><%=tmp.getName()%></a></td>
					<td><%=tmp.getPhone()%></td>
					<td><%=tmp.getEmail()%></td>
				</tr>
	</table>
</body>
</html>

+ 다른 방법: MemDAO에 멤버 하나만 가져오는 함수를 제작한 후(MemDAO.java 에 getMem() 생성), 조건문 안에서 새로운 DAO 객체를 생성해 getMem() 한 것을 MemVO로 생성. 마지막으로 request.setAttribute()로 전달한 후, 새로운 페이지에서 이를 출력

요구사항 3) 상세정보 창에서 수정버튼을 누르면 수정할 수 있는 폼이 나오고, 완료를 누르면 반영된 리스트 출력

1. Member 상세정보 페이지에 수정 버튼 삽입

<div><button type="button" onclick="edit(<%=tmp.getNum()%>)">수정</button></div>

2. 수정 버튼을 누르면 작동할 edit 조건문, update 조건문 추가

- edit 일 경우, 수정할 수 있는 폼이 나오게 한다.(MemberEdit.jsp 생성)

- update 일 경우, 수정한 내용을 반영시키고, 수정된 멤버 리스트를 출력한다.

* MemSvc.java

public String getPath() {
		String cmd = request.getParameter("cmd");
		
		if(cmd.equals("list")) {
			//showList();		
			String path = "/MemList.jsp";
			request.setAttribute("memlist", getList());
			return path;
		}
		else if(cmd.equals("selectName")) {
			int num = Integer.parseInt(request.getParameter("num"));
			List<MemVO> list = getList();
			request.setAttribute("member", list.get(num-1));
			String path = "/Member.jsp";
			return path;
		}
		else if(cmd.equals("edit")) {
			int num = Integer.parseInt(request.getParameter("num"));
			List<MemVO> list = getList();
			request.setAttribute("member", list.get(num-1));
			String path = "/MemberEdit.jsp";
			return path;
		}
		else if(cmd.equals("update")) {
			int num = Integer.parseInt(request.getParameter("num"));
			String email = request.getParameter("email");
			MemDAO dao = new MemDAO();
			dao.update(num, email);
			request.setAttribute("memlist", getList());
			return "/MemList.jsp";
		}
		return null;
	}

* MemberEdit.jsp

<%@page import="java.util.List"%>
<%@page import="com.tjoeun.MemVO"%>

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
		MemVO tmp = (MemVO)request.getAttribute("member");
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			Member 수정
		</title>
		<script
		src="https://code.jquery.com/jquery-3.6.0.min.js"
		integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
		crossorigin="anonymous"></script>
		
		<style>
		table {width: 400px; border: 1px solid black; border-spacing: 0px; border-collapse: collapse; margin: 0px auto;}
		tr {border-bottom: 1px solid black;}
		th, td{text-align: center; border-right: 1px solid black;}
		tr:nth-child(even) {background-color: #f2f2f2;}
		</style>
		
	</head>
<body>
	<table>
		<caption><h1>[Member 수정]</h1></caption>
		<tr><th>번호</th><th>이름</th><th>전화</th><th>메일</th>
				<tr>
					<td><%=tmp.getNum()%></td>
					<td><%=tmp.getName()%></td>
					<td><%=tmp.getPhone()%></td>
					<td><%=tmp.getEmail()%></td>
				</tr>
	</table>
	<form action = "/MyWeb/mem" method = "post">
  		<input type = "hidden" name = "cmd" value = "update">
  		<input type = "hidden" name = "num" value = "<%=tmp.getNum()%>">
  		email<input type = "text" name = "email" value = "<%=tmp.getEmail()%>">
  		<button type = "submit">완료</button>
	</form>
</body>
</html>

+ 추가 옵션으로 수정이 완료되었다는 알림창을 추가했다.

* MemSvc.java에 cmd.equals("update")에 추가

request.setAttribute("updated", true);

* MemList.jsp에 기존 스크립트에 내용 추가

<%
	boolean updated = (boolean) request.getAttribute("updated");
	if(updated){%>
		<script>
			alert("정상적으로 수정되었습니다.");
		</script>	
<%	}
	List<MemVO> list = (List<MemVO>)request.getAttribute("memlist");
%>

'프로그래밍' 카테고리의 다른 글

[데이터 수집] 빅데이터 수집 시스템 개발(Selenium) (0)	2021.06.22
[R] 데이터 시각화 정의(XAMPP 다운로드, 시각화 예제, 자료 수집) (0)	2021.06.22
[HTML] jQuery, AJAX 활용 (0)	2021.06.21
[Web] Login Process 제작 (0)	2021.06.17
[Web] 웹 사이트 개발(Tomcat, Servlet) (0)	2021.06.16

현재글[웹] JSP 예제(MySQL과 연동, 웹 브라우저 출력)(1)

26살! 계획과 실행을 좋아합니다:) 소프트웨어 전공생

oracle, SpringMVC, pyspark, SQL, spring, 빅데이터분석기사, HTML, CSS, jsp, 실습, Pandas, r, Python, PL/SQL, 로지스틱회귀분석, hive, matplotlib, kmeans, 모델평가, 회계관리,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

일상 정리하기