본문 바로가기
수업내용

20230524 수업내용 😢😢😢

by titlejjk 2023. 5. 24. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step01_Grid2.html</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
    <style>
        .container{
            border : 1px dotted red;
        }
        h1, p {
            border : 1px dotted green;
        }
        .row{
            border : 1px dotted blue;
        }
        .row > div{
            border : 1px dotted orange;
        }
    </style>
</head>
<body>
    <!-- container 를 만들고 -->
    <div class = "container">
        <h1>반응형 Grid 만들기</h1>
        <!--
            col-6의 의미는 화면의 폭과 상관 없이 항상 6/12 의 크기 즉 50% width를 갖겠다는 것
            col-sm-6의 의미는 조건부로 6/12의 크기 즉 50%의 width를 갖겠다는 것
            sm 은 화면의 크기가 576px 이상을 의미한다.
        -->
        <div class = "row">
            <div class = "col-sm-6">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, quam laboriosam quo itaque exercitationem, hic temporibus officia assumenda consequatur est quidem sunt omnis soluta odio non alias sit tempora earum?</p>
            </div>
            <div class = "col-sm-6">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatum architecto officia odit numquam dolorem sunt quas sed aut ratione enim laudantium recusandae natus et itaque hic nesciunt, impedit unde.</p>
            </div>
        </div>
        <div class = "row">
            <!--
                화면의 폭이 576px 이상일때 50% 의 width를 갖겠다
                화면의 폭이 768px 이상일때 25% 의 width를 갖겠다.
                화면의 폭이 576px 미만일때 100% 의 width를 갖겠다.(div는 원래 블럭 요소 이기 때문에)
                주의!
                화면의 폭이 만일 768px이상이면 576px 이상이기도 하다.
                그렇지만 width는 md가 우선시 된다,
                - 우선시 되는 순위
                sm < md < lg< xl < xxl
            -->
            <div class = "col-sm-6 col-md-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, quam laboriosam quo itaque exercitationem, hic temporibus officia assumenda consequatur est quidem sunt omnis soluta odio non alias sit tempora earum?</p>
            </div>
            <div class = "col-sm-6 col-md-3">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatum architecto officia odit numquam dolorem sunt quas sed aut ratione enim laudantium recusandae natus et itaque hic nesciunt, impedit unde.</p>
            </div>
            <div class = "col-sm-6 col-md-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, quam laboriosam quo itaque exercitationem, hic temporibus officia assumenda consequatur est quidem sunt omnis soluta odio non alias sit tempora earum?</p>
            </div>
            <div class = "col-sm-6 col-md-3">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatum architecto officia odit numquam dolorem sunt quas sed aut ratione enim laudantium recusandae natus et itaque hic nesciunt, impedit unde.</p>
            </div>
        </div>
    </div>
</body>
</html>

 

java 수업에서는 수정할 폼을 제공하는 jsp페이지 수정할 폼을 제출할 jsp페이지(수정반영하는 jsp페이지)를 프로그래밍 해보겠다.

먼저 수정을 하러갈수 있는 링크를 만들어준 후에

만들 경로를 찾아주고

updateform.jsp 라는 jsp문서를 만들어준 후에

수정할 회원의 번호를 얻어낸 후 번호를 이용해서 db에 저장된 수정할 회원의 정보를 얻어낸다.

그리고 수정할 양식을 클라이언트에게 응답해주도록 한다.

 

 

더보기

jsp 페이지는 해석된 결과가 클라이언트 웹브라우저에 출력된다.

따라서 의도하는 형식으로 정확히 클라이언트에게 출력되었는지 확인하는 것이 중요하다.

웹브라우저에서 마우스 우클릭 => 페이지 소스 보기를 해서 확인해야한다.

 

수정할 회원의 번호를 얻어낸 후

<a href = "udateform.jsp?num=<%=tmp.getNum() %>">수정</a>

updateform.jsp에서 수정할 회원의 번호를 얻어낸다.

int num = Integer.parseInt(request.getParameter("num"));

그 후 수정을 할 수 있게끔 MemberDao갓 update메소드를 만들어준다.

public MemberDto getData(int num) {
		MemberDto dto = null;
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		try {
			conn = new DbcpBean().getConn();
			String sql = "SELECT name, addr"
					+ " FROM member"
					+ " WHERE num = ?";
			pstmt = conn.prepareStatement(sql);
			//실행할 sql 문이 미완성이라면 여기서 완성
			pstmt.setInt(1, num);
			//sql 문을 수행하고 변화된(추가, 수정, 삭제된) row 의 갯수 리턴 받기
			rs = pstmt.executeQuery();
			while (rs.next()) {
				//MemberDto 개체 생성해서
				dto = new MemberDto();
				dto.setNum(num); //번호는 지역 변수에 있는 값을 담고
				//이름과 주소는 ResultSet으로 부터 얻어내서 담는다.
				dto.setName(rs.getString("name"));
				dto.setAddr(rs.getString("addr"));
			}
		} catch (SQLException se) {
			se.printStackTrace();
		} finally {
			try {
				if (rs != null)
					rs.close();
				if (pstmt != null)
					pstmt.close();
				if (conn != null)
					conn.close(); //Connection 이 Connection Pool 에 반납된다.
			} catch (Exception e) {
			}
		}
		//회원 한명의 정보가 담긴 MemberDto 객체 리턴해주기
		return dto;
	}

그런 다음 번호를 이용해서 db에 저장된 수정할 회원의 정보를 얻어내고

MemberDto dto = MemberDao.getInstance().getData(num);

수정할 양식을 만들어 준 후에

<body>
	<div class = "container">
		<h1>회원 정보 수정 양식</h1>
		<form action = "update.jsp" method = "post">
			<div>
				<label for = "num">번호</label>
				<input type = "text" id = "num" name = "num" value = "<%=dto.getNum() %>"/>
			</div>
			<div>
				<label for = "name">이름</label>
				<input type = "text" id = "name" name = "name" value = "<%=dto.getName() %>"/>
			</div>
			<div>
				<label for = "addr">주소</label>
				<input type = "text" id = "addr" name = "addr" value = "<%=dto.getAddr() %>"/>
			</div>
			<button type = "submit">수정확인</button>
			<button type = "reset">취소</button>
		</form>
	</div>
</body>

이렇게 완성시켜주면

번호는 수정 안되도록 readonly로 설정해준다.

 

 

삭제를 누르면 바로 삭제되도록 하는 코드도 만들어보았다.

<%@page import="test.member.dao.MemberDao"%>
<%@page import="test.member.dto.MemberDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	/*
		이페이지에 요청이 될때  <a href="delete.jsp?num=x"></a>  형식의 링크를 눌러서 
		GET 방식 요청이 되는 것이다.
		따라서 GET 방식 요청 파라미터로 삭제할 회원의 번호가 전달이 된다.
		해당 파라미터를 추출해서 DB 에서 삭제 하면 된다.
	*/

	//1. 삭제할 회원의 번호를 얻어내서 
	int num=Integer.parseInt(request.getParameter("num"));
	//2. DB 에서 삭제하고
	MemberDao.getInstance().delete(num);
	/*
		[리다이렉트 응답]
		- 클라이언트에게 특정 경로로 요청을 다시 하라고 응답하는 것이다.
		- 다시 요청할 경로를 전달하면 클라이언트가 해당경로로 요청을 다시 하게 된다.
		- 따라서 순간적으로 페에지가 이동되게 된다.
		- HttpServletResponse 객체의 기능을 활용하면 된다.
		- 요청을 다시할 경로를 전달할 때는 반드시 절대경로로 전달하는 것이 좋다.
		- 새로운 경로로 요청을 다시 하라고 강요하는 것도 응답이다.
	*/
	//context 경로 얻어내기(context경로는 추후에 수정되거나 제거될 예정이기 때문에 메소드로 얻어낸다)
	String cPath = request.getContextPath();
	//리다이렉트 응답하기
	response.sendRedirect(cPath + "/member/list.jsp");
%>

 

오후에는 방명록 테이블을 만들어 볼것이다.

 

만들 방법은

--방명록 테이블 생성 오라클 명령어

--방명록의 글 번호를 얻어낼 시퀀스

--요구조건

     1. 글번호는 시퀀스로 넣는다.

     2. 글 작성날짜는 오라클 sysdate함수를 이용해서 넣는다.

     3. 글 내용은 textarea요소를 이용해서 입력 받는다.

     4.글 목록은 전체글의 버호, 작성자, 내용, 등록일이 나오면된다.

     5. 글 수정, 삭제 기능을 제공하되 db에 저장된 비밀번호가 일치하지 않으면 수정, 삭제가 안디도록 하기

 

test.guest.dto 페키지에 GuestDto 클래스를 만드세요

test.guest.dao 패키지에 GuestDao 클래스를 만드세요.

 

webapp/guest/list.jsp , insertform.jsp, insert.jsp, updateform.jsp, update.jsp, delete.jsp

형태로 jsp 페이지를 만들면 됩니다.

기능을 먼저 완성하고 추후에 bootstrap css 도 적용시키기.

개인적으로 css를 적용해도 된다.

5월 25일 오전 10:30분 까지 작성할 

 

delete from guest_board

where num = x and pwd = x

'수업내용' 카테고리의 다른 글

20230526 수업내용👉👉👉  (0) 2023.05.26
20230525 수업내용🤦‍♂️🤦‍♂️🤦‍♂️  (1) 2023.05.25
수업내용 20230523🤦‍♂️🤦‍♂️🤦‍♂️  (0) 2023.05.24
20230522 수업내용🥸  (1) 2023.05.22
20230519 수업내용😭  (0) 2023.05.19

관련글

댓글

티스토리툴바