JSP 쇼핑몰 만들기

19. Jsp 페이지 액션 태그 3

Forward 액션태그
sendRedirect처럼 페이지 사이의 제어를 이동시킬때 사용한다.
다른페이지로 권한을 넘겨줄때 사용한다.
현재 페이지에서 다른페이지로 이동시킬때 사용한다.

sendRedirect와 뭐가다른가? 얘는 주소창에 데이터를 넣어서 보내야하고 단순히 페이지 이동만 가능하다.
해당 데이터를 같이 넘겨야할때는 forward를 사용해야한다.

sendRedirect하면 흐름제어가 넘어가고 request정보가 넘어가지 않는다.
jsp:forward page="ResponseRedirect.jsp"로 흐름제어를 하면 request정보도 같이 넘길 수 있다.

이게 sendRedirect와 jsp액션태그의 forward의 차이점이다.
request객체를 같이 넘기려면 forward를 사용해야한다.

그런데 보통이렇게 넘기지는 않는다. 실무에서는 Session쓴다.
둘다 사용하는 패턴이 아니다.

<body>
    이 페이지는 로그인 정보가 넘어오는 페이지 입니다.
    <%
        request.setCharacterEncoding("UTF-8");    //한글처리

        String id = request.getParameter("id"); //request에서 id를 가져와서 id추출

        //response.sendRedirect("ResponseRedirect.jsp"); //흐름제어
    %>
    <!--흐름제어-->
    <jsp:forward page="ResponseRedirect.jsp"/> 

    <h3> 아이디 = <%= id %> </h3>
</body>
<body>
    <h2> ResponseRedirect 페이지 입니다.</h2>
    <%
        request.setCharacterEncoding("UTF-8"); 

        String id = request.getParameter("id"); 
    %>
    <h3> 아이디 = <%= id %> </h3>
</body>

그런데 재밌는 제어도 가능하다.
중간에 파라미터를 넣으면 실제적으로 넘어가도 변경된 값이 넘어가게 된다.
유지시키고싶거나 임의적으로 값을 변경하고 싶다면 가능하다.
엉뚱한값이 아니라 사용하고 싶은 값도 같이 넘길 수 있다.

<jsp:forward page="ResponseRedirect.jsp"> 
    <jsp:param value="mmmm" name="id"/>
</jsp:forward>

ResponseRedirect는 단순히 이동만 가능하고 값을 뿌리려면 forward해야한다.

20. Jsp 페이지 액션 태그 4

useBean 액션태그이다. 자바 bean이라고도 한다.
자바빈을 jsp에서 사용할때 사용한다.
그런데 javabean이 무엇인가?

만약 회원가입을 한다고 가정해보자.
보통 데이터를 db에 저장한다. 하나의 회원가입 양식을 만들어서 db에 저장한다.
db도 컬럼을 만들때 쪼개서 데이터를 보낸다.
문제는 모든 회원을 가져오고 싶다.
하나씩 스트림, 배열에 담는것? 불가능하다. 배열은 고정길이라 회원이 몇명인지 모르니 사용불가능하다.
가변길이를 사용해야한다. List계열을 사용해야한다.
List를 처음 스트링으로 저장하면? 이 스트링을 다 잘게 쪼개야해서 불편하다.
그래서 우리는 db의 컬럼과 매핑되는 자바 멤버변수만 들어있는 클래스를 만들고
그 클래스에 하나씩 저장하고 이것을 가변길이 에 담는다.

자바빈즈란 여러개의 데이터를 하나의 클래스로 저장해놓고
그 클래스를 List등에 저장해서 쓸때 JavaBeans라고 한다.

JavaBeans를 만드는방법부터 사용방법부터 알아보자.

컬럼마다 값을 추출한 것을 저장할 클래스가 필요하다.
jsp와 데이터베이스 간의 데이터를 쉽게 저장할 수 있는것이 JavaBeans이다.
멤버 클래스로 만들어서 각각 매핑시키는 것이다. 이것들을 여러개에 저장하는 list에 저장한다.

javaresources에 만들어야한다.
MemberBean에 넣으려고 하는데 input박스의 이름과 필드의 이름을 맞춰줘야한다.
getter와 setter도 만들어준다.

public class MemberBean {
    private String id;
    private String pass1;
    private String email;
    private String tel;
    private String address;

    //..getter들과 setter들..
}

21. Jsp 페이지 액션 태그 5

JavaBeans를 왜 만드는지 배웠다.
useBean에서 받아서 사용할 수 있다.
스프링에서도 Bean을 사용하는데 useBean을 안써도 매핑이 된다.
스프링을 배우면 jsp가 쉬운데 그럼 스프링만 배우면되나?
스프링은 플랫폼일뿐이지 jsp와 서블릿을 더 쉽게 사용할 수 있는 것이다.

원래대로였다면 String id = request.getParmeter이런식으로 받아왔다.
그런데 받아올 데이터가 너무 많아지면 코드가 길어질 수 있다.

request로 넘어온 데이터를 자바 빈즈랑 매핑 시켜주는 useBean을 사용하면된다.

<jsp:useBean id="mbean" class="bean.MemberBean"/>하면
MemberBean mbean = new MemberBean() 객체를 생성하는 것과 같은것이다.
이것을 자바빈 클래스에 매핑을 해야한다.
값을 세팅할때 : setProperty

<jsp:useBean id="mbean" class="bean.MemberBean">
    <jsp:setProperty name = "mbean" property="id"/>
</jsp:useBean>

하면 아이디 하나만 매핑하는 것이다.
모두 매핑하려면 을 넣어주면된다.
<jsp:setProperty name = "mbean" property=""/>

반드시 input의 name과 bean의 필드이름이 같아야지 자동으로 매핑된다.

<%= mbean.getTel() %>
간단하게 표현식으로 값을 출력할 수도 있다.
왜 사용할 수있냐면 usebean으로 mbean이라는 변수로 객체를 만들었기 때문이다.

<div align="center">
    <% 
        request.setCharacterEncoding("UTF-8");
    %>

    <!--request로 넘어온 데이터를 자바 빈즈랑 매핑 시켜주는 useBean  -->
    <!--객체생성 MemberBean mbean = new MemberBean()-->
    <jsp:useBean id="mbean" class="bean.MemberBean">
    <!--JSP내용을 자바 빈 클래스(MemberBean의미)에 데이터를 매핑(넣어줌)-->
        <jsp:setProperty name = "mbean" property="*"/> <!--자동으로 매핑해주세요-->
    </jsp:useBean>
    <h2>당신의 아이디는 <jsp:getProperty property="id" name="mbean"/></h2>
    <h2>당신의 패스는 <jsp:getProperty property="pass1" name="mbean"/></h2>
    <h2>당신의 이메일는 <jsp:getProperty property="email" name="mbean"/></h2>
    <h2>당신의 전화번호는 <%= mbean.getTel() %></h2>
</div>

22. JSP와 데이터베이스

회원가입 데이터가 있다 실제 데이터베이스에 넣어보려고 한다.
패턴이 3가지가 있다.
1.데이터를 받아서 jsp내에서 db연동하기
2.jsp로받아서 javaDAO에 넣어서 db에 넣고 빼기 -> 이패턴을 많이 사용한다.
3.Connection pool을 사용해서 집어넣고 빼기

모델1에서는 1번방식을 꽤나 많이 사용한다.
DAO는 모델2에서 많이 사용한다.

그러면 데이터를 레코드를 저장할 테이블이 필요하다.
1.id 2.패스워드 3.이메일 4.전화번호 5.관심분야(배열) 6.직업 7.연령 8.하고싶은말
회원보기, 수정, 삭제까지 해보자.

db에서의 일정
1.회원가입 jsp만들기
2.db table만들기
3.처리jsp만들기 -> 여기서 db연결 저장
4.저장하고 response해서 회원전체보기
5.수정, 삭제 db다루기

23. JSP와 데이터베이스 연동 1

23.1 회원가입 jsp만들기

이전에 사용한것 가져다쓰자.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div align="center">
        <h2>회원 가입</h2>
        <form action="MemberJoinProc.jsp">
            <table width="500" border="1">
                <tr height="50">
                    <td width="150" align="center">아이디</td>
                    <td width="350" align="center"><input type="text" name="id" size="40" placeholder="id를 넣으세요"></td>
                </tr>

                <tr height="50">
                    <td width="150" align="center">패스워드</td>
                    <td width="350" align="center"><input type="password" name="pass1" size="40" placeholder="비밀번호는 숫자와 영어만 넣어주세요"></td>
                </tr>

                <tr height="50">
                    <td width="150" align="center">패스워드 확인</td>
                    <td width="350" align="center"><input type="password" name="pass2" size="40"></td>
                </tr>

                <tr height="50">
                    <td width="150" align="center">이메일</td>
                    <td width="350" align="center"><input type="email" name="email" size="40"></td>
                </tr>
                <tr height="50">
                    <td width="150" align="center">전화 번호</td>
                    <td width="350" align="center"><input type="tel" name="tel" size="40"></td>
                </tr>

                <tr height="50">
                    <td width="150" align="center">당신의 관심 분야</td>
                    <td width="350" align="center"><input type="checkbox" name="hobby" value="캠핑">캠핑&nbsp; <input type="checkbox" name="hobby" value="등산">등산&nbsp; <input type="checkbox" name="hobby" value="독서">독서&nbsp; <input type="checkbox" name="hobby" value="음악">음악&nbsp;</td>
                </tr>

                <tr height="50">
                    <td width="150" align="center">당신의 직업은</td>
                    <td width="350" align="center"><select name="job">
                            <option value="교사">교사</option>
                            <option value="의사">의사</option>
                            <option value="변호사">변호사</option>
                            <option value="기술사">기술사</option>
                    </select></td>
                </tr>

                <tr height="50">
                    <td width="150" align="center">당신의 연령은</td>
                    <td width="350" align="center"><input type="radio" name="age" value="10">10대&nbsp; <input type="radio" name="age" value="20">20대&nbsp; <input type="radio" name="age" value="30">30대&nbsp; <input type="radio" name="age" value="40">40대&nbsp;</td>
                </tr>

                <tr height="50">
                    <td width="150" align="center">하고 싶은말</td>
                    <td width="350" align="center"><textarea rows="5" cols="40" name="info"></textarea></td>
                </tr>

                <tr height="50">
                    <td width="150" colspan="2"><input type="submit" value="회원 가입"> <input type="reset" value="취소"></td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

23.2 db table만들기 단계를 해보자.

타입지정해야하는데 자바 빈을 사용하자.
실제 테이블은 8개지만 패스워드 확인을 해야하니 pass1 pass2다 만든다.

public class MemberBean {
    private String id;
    private String pass1;
    private String pass2;
    private String email;
    private String tel;
    private String hobby;
    private String job;
    private String age;
    private String info;
    //...getter setter들...
}

24. JSP와 데이터베이스 연동 2

24.1 MEMBER테이블 생성

Member테이블을 만들어보자.
실무에서는 각 컬럼의 크기를 잘 정해야한다.
수백 수천명이 되면 DB크기를 다 잡아먹기때문이다.

24.2 데이터 받아오기

그냥 매핑하면 hobby가 배열로 오기때문에 주소가 매핑된다.
그래서 취미 부분은 별도로 읽어서 다시 빈클래스에 저장해야한다.
즉 기존 취미는 주소 번지가 저장되기에 배열의 내용을 하나의 스트링으로 저장한 변수를 다시입력

<%
    request.setCharacterEncoding("UTF-8");

    //취미 별도로 읽어서 저장하기
    String[] hobby = request.getParameterValues("hobby");
    String textHobby="";
    for(int i = 0; i < hobby.length ; i++){
        textHobby += hobby[i] + " ";
    }
%>
    <!-- useBean으르 이용하여 한꺼번에 데이터를 받아옴 -->
    <jsp:useBean id="mbean" class="model.MemberBean">
        <jsp:setProperty name="mbean" property="*" /> <!-- 매핑시키시오 -->
    </jsp:useBean>

<% 
    mbean.setHobby(textHobby);
%>

25. JSP와 데이터베이스 연동 3

실제 데이터베이스와 연동을 해보자.
JSP에서 오라클 접속하기
연결하는 JAR파일이 필요하다. JDBC클래스들이 모여있다.

톰캣이 설치된 곳에 가져다 놓아야한다.
톰캣의 lib에 넣어주자.

익숙한 JDBC코드를 작성해주면된다.
오라클에 완료~가 뜨면 정상적으로 데이터가 들어가게 되는 것이다.

<% 
    //오라클에 접속하는 소스
    String dbID = "chun"; //접속아이디 비밀번호
    String dbPwd = "1234";
    String dbURL = "jdbc:mysql://localhost:3306/jspshop"; //접속url

    try {
        //1. 해당 데이터 베이스를 사용한다고 선언(클래스등록)
        Class.forName("com.mysql.cj.jdbc.Driver");
        //2. 해당데이터베이스에 접속
        Connection con = DriverManager.getConnection(dbURL, dbID, dbPwd);
        //3.접속 후 쿼리준비하여 쿼리를 사용호도록 설정
        String sql = "INSERT INTO MEMBER VALUES(?,?,?,?,?,?,?,?)";
        //쿼리를 사용하도록 설정
        PreparedStatement pstmt = con.prepareStatement(sql);
        //?에 맞게 데이터 설정
        pstmt.setString(1, mbean.getId());
        pstmt.setString(2, mbean.getPass1());
        pstmt.setString(3, mbean.getEmail());
        pstmt.setString(4, mbean.getTel());
        pstmt.setString(5, mbean.getHobby());
        pstmt.setString(6, mbean.getJob());
        pstmt.setString(7, mbean.getAge());
        pstmt.setString(8, mbean.getInfo());
        //4.오라클에서 쿼리를 실행하시오
        pstmt.executeUpdate(); // insert update delet시 사용하는메소드

        //5. 자원반납
        con.close();

    } catch (Exception e) {
        e.printStackTrace();
    }

%>
    오라클에 완료~

26. JSP와 데이터베이스 연동 4

만약 검색 등을 JSP코드에 모두 작성하게 되면 JSP가 자바가 되버린다.
Bean클래스도 외부에 빼서 만들엇듯이 MemberDAO를 자바와 관련된것을 자바클래스로 만들어서
jsp가 이것을 호출해서 사용하면 된다.
쓸데없이 JSP에 자바코드가 너무 많이들어가면 안좋다.

MemberDAO패턴 적용해보자
DAO란 DATA ACCESS OBJECT이다.

JSP에 모든 자바코드가 다 들어갈 필요가없다. JSP는 화면을 꾸며주는 역할을 하기 때문이다.
항상 INSERT하거나 등등을 하려면 해당 DB에 연결해야한다.

반복적으로 사용하려면 메소드를 사용하는게 좋다.

// DB접근할 수 있도록 도와주는 메소드 생성
public void getCon() {
    try {
        Class.forName("com.mysql.cj.jdbc.Driver");
        con = DriverManager.getConnection(dbURL, dbID, dbPwd);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

jsp에서 MemberBean객체를 생성하고 mbean에 담아서 사용했던 것이니 파라미터로 MemberBean mbean을 받으면 된다.

// 데이터 베이스에 한사람의 회원정보를 저장해주는 메소드
public void insertMember(MemberBean mbean) {
    getCon();

    try {
        String sql = "INSERT INTO MEMBER VALUES(?,?,?,?,?,?,?,?)";

        PreparedStatement pstmt = con.prepareStatement(sql);

        pstmt.setString(1, mbean.getId());
        pstmt.setString(2, mbean.getPass1());
        pstmt.setString(3, mbean.getEmail());
        pstmt.setString(4, mbean.getTel());
        pstmt.setString(5, mbean.getHobby());
        pstmt.setString(6, mbean.getJob());
        pstmt.setString(7, mbean.getAge());
        pstmt.setString(8, mbean.getInfo());

        pstmt.executeUpdate();

        con.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

그리고 객체를 만들어서 insert를 실행시키면된다.

<% 
    //데이터베이스 클래스 객체 생성
    MemberDAO mdao = new MemberDAO();
    mdao.insertMember(mbean);
%>

27. 데이터베이스 연동 5

매번 db를 켜서 내용을 볼 수는 없다.
db를 사용하는 것은 대부분은 검색을 하기 위해 사용하는 것이다.

select문을 사용해보자.

회원 전체보기를 해보자. 입력과 동시에 결과를 리턴해서 화면에 모든 회원들을 보여주자.
테이블로 보여주자.
간단하게 id email tel hobby만 보여주자.
그래도 전체를 다 받아와야한다.

MemberList.jsp파일로 연결해주자. 그냥 페이지만 불러오면되니 sendRedirect하면 된다.

한사람의 정보는 MemberBean에 저장하면되는데 여러사람이라면 MemberBean을 저장해줄 클래스가 필요하다.
이것을 담을 박스를 만들어보자.
배열은 크기를 정해놔야하니 좋지 않다.
그래서 처음부터 가변길이의 List를 사용하는것이 좋다.
ArrayList와 Vector가 잇는데 Vector를 사용해보자.

<!-- 1. db에서 모든 회원의 정보를 가져오기 2.테이블태그로 화면에 회원들의 정보를 출력 -->
<%
    MemberDAO mdao = new MemberDAO();
    //가변길이인 벡터르 이용하여 데이터를 저장해줌
    Vector<MemberBean> vec = mdao.allSelcetMember();
%>
//모든 정보의 정보를 리턴해주는 메소드
public Vector<MemberBean> allSelcetMember() {
    Vector<MemberBean> v = new Vector<>();
    return v;
}

2023.03.22 후기

약간 애매모호했던 개념들이 잡히는 것 같다.
스프링과 사용방법이 조금 다를 뿐이지 결론적으로 사용되는 방식이 유사하다.
어떤 점에서 JSP가 선행되면 좋은지를 알았을때의 느낌을 알게 되는 것 같다.

'기초단계 > JSP&Servlet' 카테고리의 다른 글

2023.03.25 JSP  (0) 2023.03.26
2023.03.23 JSP  (0) 2023.03.23
2023.03.21 JSP  (0) 2023.03.21
2023.03.20 JSP  (0) 2023.03.20
2023.03.19 Servlet  (0) 2023.03.20

+ Recent posts

티스토리툴바