본문 바로가기
Back/Spring

Day24_CRUD jsp 완성 과제

by uxia 2023. 6. 15.

Day23에서 jsp를 작성하는 법을 배웠는데,

그에 이어서 회원가입, 탈퇴 페이지, 게시판 글쓰기, 글 삭제, 글 수정

페이지의 jsp를 완성하는 게 과제였다.

 

member.html과 update.html 파일이

회원정보 페이지와 회원수정 페이지다.

 

이 부분 서버를 실행시켜주면 아래와 같이 뜬다.

 

회원의 아이디와 전화번호를 수정하도록 되어있는데,

DBeaver에서 입력받은 ID를 확인한다.

DB에 올라가있는 ID만 수정이 가능하고, 그 외의 ID는

수정이 불가하다.

 

update.html파일을 통해 아이디와 전화번호를 입력받는 창이 있으니,

이제 데이터를 받아서 sql문을 만들어 DB로 보내는 jsp파일을 만들어주면 된다.

 

update.jsp는 insert.jsp와 동일한데, sql문만 다르므로

insert.jsp를 복사하여 편집해준다.

 

id와 tel에 대한 데이터만 필요하므로

기존에 있던 name과 pw는 지워준다.

 

업데이트를 해야하기 때문에 sql문을 수정해줘야한다.

아래 코드를 추가해주면 되는데,

Java니까 String으로 연결해서 한 줄로 써준다.

String sql = "update member
	     set tel = ?
             where id = ?";

입력된 ID (?)를 찾아 tel만 (?)로 변경해주라는 의미다.

여기서 물음표는 반드시 따옴표 없이 써줘야한다.

따옴표를 써주면 문자로 인식해버린다.

 

여기서 ?가 두 개가 나왔는데

앞에서부터 순차적으로 인덱스 번호가 붙는다.

 

따라서 tel이 1번 물음표, id가 2번 물음표가 된다.

name과 pw 메소드를 삭제해주고 id 앞 인덱스에는 2를,

tel 앞 인덱스에는 1을 써줘야한다.

 

보통 Java의 인덱스, 배열의 인덱스 등 모든 인덱스는 0부터 시작하는데,

이 물음표 연산자는 인덱스가 1번부터 시작한다.

DB에서 검색하여 테이블을 리턴받는 경우, 컬럼도 인덱스가 1번부터 시작한다.

 

즉, Java는 DB와 관련된 것만 인덱스가 1번부터 시작한다고 보면 된다.

 

이제 html 부분에서도 name과 pw를 지워주고 서버를 실행시키면

다음과 같이 뜬다.

DB에서 SQL문 실행을 눌러주면

변경사항이 적용된 걸 확인할 수 있다.

 

한 가지 팁으로는,

html이 포함된 코드를 수정한 경우 jsp, html은 서버를 재시작하지 않고

브라우저에서 실행하기 때문에 브라우저만 새로고침 해줘도 된다.

 

 

다음으로 delete.jsp를 생성한다.

update.jsp를 복사하여 delete.jsp 이름으로 붙여넣어 jsp 파일을 만들어준다.

 

실상에서는 다를 수 있으나, 지금 실습에서는

탈퇴할 때 id 데이터만 필요하기 때문에

id만 입력받아 delete.jsp로 넘기도록 하면 된다.

 

앞에 update.jsp와 마찬가지로

필요 없는 tel 부분을 지워주고 sql문만 변경해준다.

<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

	<!-- 
    --- 여기에서 해야하는 작업 순서
    1. form 안에서 입력해서 서버로 전달할 값을 받아와서 ram(변수)에 저장
    2. 받은 데이터를 가지고 sql문 만들어서 db 서버로 전송
    3. 브라우저에게 결과가 어떻게 되었는 지 알려줘야 함(only html)
    -->

	<%
    // 자바코드를 넣을 수 있음
    // 필요한 코드블록만 넣을 수 있음
    /* 지금 이걸 작성하는 <, % 이 기호 스크립트릿(scriptlet)
       : 자바 코드를 일부만 작성하는 작은 프로그램 */
    // 1. 값을 받아서 Ram의 변수에 집어넣는다.
    // HttpServletRequest request = new HttpServletRequet();
    // id = apple & pw = 1234 & name = apple & tel = 011
    		// Cmd + Option + 화살표 아래 = 한 줄 복사
    // 한 줄 삭제는 Cme + D
    String id = request.getParameter("id");
    // 내장된 객체 : request, response, session, application, model
    
    // db 연결해서 sql만든 후 전송
    //	1. 드라이버 설정
    Class.forName("com.mysql.cj.jdbc.Driver");
    //  out객체 : 내장된 객체, PrintWriter
    out.print("1. 드라이버 설정 성공");
    String url = "jdbc:mysql://localhost:3306/shop?serverTimezone=UTC";
    String user = "root";
    String password = "1234";
    //	2. DB 연결 - url(ip + port + db명), id, pw
    
    // jsp에서 import 단축키 : Cmd + Shift + M
    Connection con = DriverManager.getConnection(url, user, password); //Connection
    out.print("<br>2. DB 연결 성공"); 
    
    //	3. sql문 생성
    String sql = "delete from member where id = ?";
    //  위의 String은 자바에서는 sql문으로 인식을 못함
    //  -> sql문에 해당하는 부품으로 만들어줘야 함
    //  PreparedStatement --- sql
    PreparedStatement ps = con.prepareStatement(sql);
    ps.setString(1, id);
    
    out.print("<br>3. sql문 생성 성공");
    
    //	4. sql문 전송
    ps.executeUpdate();
    out.print("<br>4. sql문 전송 성공<br>");
    
    %>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor="lightgrey">
	<br> 요청에 대한 응답이 들어가는 부분 <br>
	<br> 서버로 전달된 id :
	<%= id %>
	<br>
</body>
</html>

 

ps 객체를 통해서 executeUpdate문을 실행하면 db서버로 전달되는데,

sql문을 전송하면 mysql에서 받게 된다.

 

그러나 이 코드 상으로는 직접 확인이 어려워

일일이 db에서 확인을 해야하고, 실무에서는 이렇게 하면 안된다.

 

서버를 실행시켜주면 아래와 같이 정상적으로 뜬다.

DB에서 확인해보면 com ID로 된 데이터가 삭제됐다.

 

 

bbs도 같은 방식으로 해주는데, sql문만 다르게 한다.

 

DBeaver에서 bbs 테이블을 만들어주고,

localhost script에 sql문을 작성해준다.

 

 

 

id확인을 위해

select id, name, tel from member

코드에 커서를 두고 Ctrl + Enter를 눌러 확인을 해준다.

 

아래 코드를 작성해주는데,

id는 위에서 확인한 id중 xia로 입력했다.

desc bbs 

insert into bbs 
values (1, 'java', 'fun java', 'xia')

select * from bbs

코드 작성 후 select * from bbs 부분에 커서를 두고

Ctrl + Enter를 다시 눌러주면 DB에 데이터가 입력된 걸 확인할 수 있다.

 

 

다음으로 update문을 작성해주고

다시 Ctrl + Enter를 하면 content 부분이 best java로 업데이트됐다.

update bbs set content = 'best java'
where no = 1

 

마지막으로 delete문을 작성하고

다시 Ctrl + Enter로 확인하면 데이터가 사라졌다.

 

실무에서는 Java에서 바로 sql문을 작성하지 않고

DBeaver에서 sql문을 먼저 만들어 테스트하고, Java에 옮겨 쓰는 방식으로

많이 한다고 한다. 

 

 

bbs.html을 보면 게시판 글쓰기는 insert2.html에서

진행하면 된다고 나와있다.

 

insert2.html을 보면  no, title, content, writer 항목이 있고,

insert2.jsp에서 진행하라고 나와있다.

 

저번에 insert2.jsp를 만들어줬었는데,

여기에 db를 연결하는 코드를 넣어줘야한다.

 

insert.jsp에서 작성했던 코드를 그대로 가져와서 붙여넣는다.

 

오류가 나는 부분에 대해서는 전 시간에 했던 것과 마찬가지로

Cmd + Shift + M 을 눌러 java.sql을 생성해주면 된다.

 

그리고 항목도 no, title, content, writer로 수정해준다.

마지막으로 32번 행의 데이터타입을 맞춰줘야하는데,

DB에서 Int로 등록했기때문에 String이 아닌 int로 변경해줘야한다.

그리고 no가 아닌 Integer.parseInt(no)로 컴버팅 해줘야 오류가 사라진다.

 

String, int를 변환해주는 데이터타입 변환은

'퀘스팅(형변환)'이라 한다.

 

 

전체 코드는 아래와 같다.

<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    <%
    String no = request.getParameter("no");
    String title = request.getParameter("title");
    String content = request.getParameter("content");
    String writer = request.getParameter("writer");
    
//	1. 드라이버 설정
    Class.forName("com.mysql.cj.jdbc.Driver");
    //  out객체 : 내장된 객체, PrintWriter
    out.print("1. 드라이버 설정 성공");
    String url = "jdbc:mysql://localhost:3306/shop?serverTimezone=UTC";
    String user = "root";
    String password = "1234";
    //	2. DB 연결 - url(ip + port + db명), id, pw
    
    // jsp에서 import 단축키 : Cmd + Shift + M
    Connection con = DriverManager.getConnection(url, user, password); //Connection
    out.print("<br>2. DB 연결 성공"); 
    
    //	3. sql문 생성
    String sql = "insert into bbs values (?, ?, ?, ?)";
    //  위의 String은 자바에서는 sql문으로 인식을 못함
    //  -> sql문에 해당하는 부품으로 만들어줘야 함
    //  PreparedStatement --- sql
    PreparedStatement ps = con.prepareStatement(sql);
    ps.setInt(1, Integer.parseInt(no));
    ps.setString(2, title);
    ps.setString(3, content);
    ps.setString(4, writer);
    
    out.print("<br>3. sql문 생성 성공");
    
    //	4. sql문 전송
    ps.executeUpdate();
    out.print("<br>4. sql문 전송 성공<br>");
    
    %>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor = "black" text = "white">
	요청에 대한 응답 : <br>
	서버로 전달된 no : <%= no %> <br>
	서버로 전달된 title : <%= title %> <br>
	서버로 전달된 content : <%= content %> <br>
	서버로 전달된 writer : <%= writer %> <br>
</body>
</html>

 

이제 서버를 실행시켜주면 아래와 같이 뜬다.

 

 

다음 update.html을 update2.html로 복붙을 해준다.

마찬가지로 update.jsp를 update2.jsp로 복붙해준다.

delete.jsp도 delete2.jsp로 복붙해준다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'Back > Spring' 카테고리의 다른 글

Day33_DAO+VO(DTO)로 회원가입 페이지 생성(DB에 연결) with Exception(오류코드)  (0) 2023.06.21
Day31_AJAX로 JSON 파일을 받아서 출력 후 DB에 저장  (0) 2023.06.20
Day20_#9 IntelliJ 스프링부트 롬복과 리팩터링  (0) 2023.06.08
Day17_#7_IntelliJ 스프링부트 JPA로 DB에 데이터 생성  (0) 2023.06.01
Day12_#6_폼 데이터를 받아 Controller에서 확인  (0) 2023.05.31

관련글

티스토리툴바