TIL #220522 #JSP

개인 공부/TIL

TIL #220522 #JSP

kaleb 2022. 5. 23. 00:00

728x90

계속해서 JSP 했던 것들 복습!!을 하니 주말이 끝나버렸네요!! 이게무슨일이야...

주말 하루만 더 주시면 감사하겠습니다.

그래도 정리하면서 수업시간에는 무의식적으로 했던 내용들을 천천히 복기하면서 그래도 조금 이해가 잘 되는 것 같습니다. 계속 반복하면 이제 100%가 되지않을까요?..?~~아닌가요?~~

오늘은 개념적인 내용도 많지만 코드를 직접 천천히 적어가면서 작업의 순서를 생각하면서 진행 해보았습니다.

바로 시작하겠습니다.

JDBC를 통해서 update구문 연습해보기

updateForm 연습

<%
// 앞써 사용한 inserform의 이름과 나이가 있는 데이터를 update를 통해 나이를 수정해봅시다.
%>
<h1>Update</h1>
 <form action="updatePro.jsp" method="post">
 	<table border="1">
 		<tr>
 			<th>이름</th>
 			<td><input type="text" name="name"></td>
 		</tr>
 		<tr>
 			<th>나이</th>
 			<td><input type="text" name="age"></td>
 		</tr>
 		<tr>
 			<td colspan="2">
 				<input type="submit" value="전송">
 			</td>
 		</tr>
 	</table>
 </form>

updatePro 연습

<%
	request.setCharacterEncoding("UTF-8");
//post의 경우에는 한글이 깨짐으로 setCharacer를 선언해줍니다.
%>

<%
	//이전의 페이지의 값을 불러옵니다. 불러오 데이터를 변수안으로 넣습니다.
	String name = request.getParameter("name");
	int age = Integer.parseInt(request.getParameter("age"));
		
	// DB 연결에서 사용될 데이터들을 변수 안으로 미리 넣어줍니다.
	String driver = "com.mysql.cj.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/study_jsp2";
	String user = "root";
	String password = "1234";
%>

<%
// JDBC 연결 1단계 드라이버 로드
	Class.forName(driver);
	System.out.println("드라이버 로드 성공");
	
// 2단계 DB 연결
	Connection con = DriverManager.getConnection(url, user, password);
	System.out.println("DB연결");
	
// 3단계 구문작성 및 전달
	String sql = "UPDATE test1 SET age= ? WHERE name = ?";
	PreparedStatement pstmt = con.prepareStatement(sql);
	pstmt.setInt(1, 40);
	pstmt.setString(2, "김태희");
	System.out.println("구문 작성 완료");
	
// 4단계 구문 실행
	int updateCount = pstmt.executeUpdate();
	pstmt.close();
	con.close();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h3>이름 : <%=name %></h3>
	<h3>나이 : <%=age %></h3>
	
	<% if(updateCount > 0) {%>
	<h3>구문 실행성공</h3>	
	<%} else { %>
	<h3> 구문 실행 실패</h3>
	<% }%>
</body>

body에 값을 출력하게 하여 값들이 잘 넘어 왔는지 체크해줍시다.

JDBC를통해 Select구문 실행 및 출력 해보기

<body>
	<h1>select.jsp</h1>
<%
// 앞서 만든 데이터베이스를 SELECT문을 이용해서 출력해서 볼수있도록 해봅시다.
// 입력해서 등록된 DB에서 값을 불러오기 때문에 바로 연결해줍시다.
// 드라이버 로드에 필요한 변수 값들을 미리 선언해줍니다.
	String driver = "com.mysql.cj.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/study_jsp2";
	String user = "root";
	String password = "1234";
	
// 1단계 드라이버 로드
 	Class.forName(driver);
	System.out.println("드라이버 로드 성공");
	
// 2단계 DB 연결
	Connection con = DriverManager.getConnection(url, user, password);
	System.out.println("DB연결");	

// 3단계 구문 작성 및 전달
	String sql = "SELECT * FROM test1";
	PreparedStatement pstmt = con.prepareStatement(sql);
	System.out.println("구문 작성 완료");

// 4단계 구문 실행
%>
	<table border ="2">
		<tr>
			<th>이름</th> <th>나이</th> <th>성별</th> <th>취미</th>
		</tr>
<%
	ResultSet rs = pstmt.executeQuery();
		while(rs.next()) {
			String name = rs.getString("name"); //getString(column label)
			int age = rs.getInt(2); //getInt(column index)
			String gender = rs.getString(3);
			String hobby = rs.getString(4);
		
%>
		<tr>
			<td><%=name %></td> <td><%=age %></td> <td><%=gender %></td> <td><%=hobby %></td>
		</tr>
<%
	}
		rs.close();
		pstmt.close();
		con.close();
%>		
	</table>
</body>

Select 구문의 경우 실행문을 할 때 Reulstset과 excuteQuery를 이용하여 ResultSet타입의 반환 값으로 결과 값을 저장할 수 있습니다.

이때 저장된 결과 값을 한 행 단위로 불러오는데 이를 while문과 조건식을 .next()메소드를 통해서 선택되는 행을 바꿔가면서 불러와야할 값들 여러 개 일 경우에 활용할 수 있습니다.

(next()메소드의 경우는 boolean 타입입니다.)

이후 get타입 메소드를 통해서 값을 불러옵니다.

get타입 메소드의 경우 column 레이블 명으로 값을 받거나 컬럼의 인덱스 즉 순서 값으로 argument를 받습니다.

getString(column label) / getInt(column index)

JDBC DAO, DTO

DAO (Data access object) : SQL문을 보내는 여러개의 객체들을 하나로 통합해 DB에 접근하는 방식입니다.

DTO (Data Transfer Object) :

데이터를 주고 받을 때 쓰이는 객체 테이블 칼럼을 멤버변수화 시키고 getter & setter를 통해 접근하도록 합니다.

이제 DAO DTO를 사용해봅시다.

준비물 : testForm, testPro, test_select, testDAO, DTO

testform으로 입력된 값을 데이터베이스에 insert하고 조건에 맞는 값을 조회하는 test_select을 만들어 DAO, DTO를 연습해보았습니다.

이해가 잘 안될때는 자료 흐름도를 통해서 순서를 잘 이해하고 진행하는게 도움이 많이 되는것 같습니다.

참고 : 자료흐름도 만들기

https://www.diagrams.net/

Diagram Software and Flowchart Maker

Security-first diagramming for teams. Bring your storage to our online tool, or go max privacy with the desktop app. No login or registration required.

www.diagrams.net

testForm

testForm의 경우 번호와 이름만 입력받도록 하였습니다.

<h1>testForm</h1>
	<form action="testPro.jsp" method="post">
		<table border="2">
			<tr><th>번호</th> <td><input type="text" name="idx"></td></tr>
			<tr><th>이름</th> <td><input type="text" name="name"></td></tr>
			<tr><td colspan="2"><input type="submit" value="전송"></td></tr>
		</table>
	</form>

testPro

<%
// post 방식임으로 차셋을 바꿔줍니다.
request.setCharacterEncoding("UTF-8");
int idx = Integer.parseInt(request.getParameter("idx"));
String name = request.getParameter("name");

//TestDTO 클래스의 인스턴ㄴ스를 생성한후 setter메서드를 호출하여 데이터를 저장합니다.
 TestDTO dto = new TestDTO();
	dto.setIdx(idx);
	dto.setName(name);
	
 TestDAO dao  = new TestDAO();
 int insertCount = dao.insert(dto);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>testPro.jsp</title>
</head>
<body>
	<h3>번호 : <%=dto.getIdx() %></h3>
	<h3>이름 : <%=dto.getName() %></h3>
	<button onclick="location.href='test_Select.jsp?idx=<%=dto.getIdx() %>'">회원 정보 확인</button>
</body>

버튼 클릭시 하이퍼링크를 이동할때 값을 같이 전달하고자 할 경우에는 ? 를 이용합니다!

TestDTO

public class TestDTO {
	// 데이터를 저장하는 주고 받을 때 사용하는 TestDTO를 만들어 줍니다.
	/*
	 * 데이터를 저장할 인스턴스 멤머변수, DB 테이블의 칼럼의이름, 타입의 수 만큼 선언합니다.
	 * 이 경우에는 2개를 선언합니다.
	 * 멤버변수에 접근할 Getter/Setter를 선언해줍니다.
	 * Getter/Setter 빨리 만들기는 Alt + shift + s -> r 입니다.
	 */
	
	private int idx;
	private String name;
	
	public int getIdx() {
		return idx;
	}
	public void setIdx(int idx) {
		this.idx = idx;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

Test DAO

public class TestDAO {
	
	public int insert(TestDTO dto) throws Exception{
		
		// DB 설정을 위한 값들을 변수에 입력
		String driver = "com.mysql.cj.jdbc.Driver";
		String url = "jdbc:mysql://localhost:3306/study_jsp2";
		String user = "root";
		String password = "1234";
		
		// 1단계 드라이버 로드
		Class.forName(driver);
		System.out.println("드라이버 로드");
		
		//2단계 DB연결
		Connection con = DriverManager.getConnection(url, user, password);
		System.out.println("DB 연결 성공");
		
		//3단계 구문 작성 및 전달
		String sql = "INSERT INTO test2 VALUES(?, ?)";
		PreparedStatement pstmt = con.prepareStatement(sql);
		pstmt.setInt(1, dto.getIdx());
		pstmt.setString(2, dto.getName());
		System.out.println("구문작성 성공");
		
		//4단계
		int insertCount = pstmt.executeUpdate();		
		System.out.println("insert 작업 " + insertCount + "개 성공");
		
		pstmt.close();
		con.close();
		
		return insertCount;
	}
	
	public TestDTO selectInfo(int idx) throws Exception {
		
		TestDTO dto = null;
		String driver = "com.mysql.cj.jdbc.Driver";
		String url = "jdbc:mysql://localhost:3306/study_jsp2";
		String user = "root";
		String password = "1234";
		
		// 1단계 드라이버 로드
		Class.forName(driver);
		System.out.println("드라이버 로드");
		
		//2단계 DB연결
		Connection con = DriverManager.getConnection(url, user, password);
		System.out.println("DB 연결 성공");
		
		//3단계 구문 작성
		String sql = "SELECT * FROM test2 WHERE idx=?";
		PreparedStatement pstmt = con.prepareStatement(sql);
		pstmt.setInt(1, idx);
		
		//4단계 구문실행
		ResultSet rs = pstmt.executeQuery();
		while(rs.next()) {
			dto  = new TestDTO();
			dto.setIdx(rs.getInt("idx"));
			dto.setName(rs.getString("name"));
		}
		rs.close();
		pstmt.close();
		con.close();
		
		return dto;
	}
}

test_select

<%
   		int idx = Integer.parseInt(request.getParameter("idx"));
   		TestDAO dao = new TestDAO();
   		//dao 의 값을 불러와야 하기 떄문에 새로운 dao 인스턴스 생성
   		TestDTO dto = dao.selectInfo(idx);
   		// dto의 경우 testDAO에서 인스턴스를 만들어놨음!
   %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>test_select</h1>
	<h2>번호 : <%=dto.getIdx() %></h2>
	<h2>이름 : <%=dto.getName() %></h2>
</body>
</html>

여러 파일들이 유기적으로 연결되어있고 그 페이지수가 점점 많아지는 것 같습니다.

수업시간에는 배우기 급급해서 충분한 시간이 없을 수도 있지만 복습을 할 때는 자료흐름도를 구상하면서 충분히 흐름에 대해 생각하면서 진행하니깐 도움이 많이 되는 것 같습니다.

처음에는 저도 이해가 잘 안되었는데 오늘 하고나니깐 조금 손맛(?) 정도는 온 것 같습니다. 시간 날때마다 반복해봅시다!

'개인 공부 > TIL' 카테고리의 다른 글

TIL #220524 #JSP #JAVA (0)	2022.05.24
TIL #220523 #JSP #JAVA (0)	2022.05.23
TIL #220521 #JSP (6)	2022.05.22
TIL #220520 #JSP #DB (0)	2022.05.20
TIL #220519 #DB #WEB (0)	2022.05.19

현재글TIL #220522 #JSP

공부 및 취미 개발을 위한 필기장

Today :
Yesterday :

미어캣의 필기장

TIL #220522 #JSP

'개인 공부 > TIL' 카테고리의 다른 글

'개인 공부/TIL'의 다른글

티스토리툴바

« 2024/04 »
일	월	화	수	목	금	토
	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

TIL #220522 #JSP

'개인 공부 > TIL' 카테고리의 다른 글

'개인 공부/TIL'의 다른글

관련글

티스토리툴바