2023.03.21 JSP

JSP 쇼핑몰 만들기

12. Jsp 페이지 내장객체 4

request.getparameter로 받아서 사용했다.
회원가입 페이지를 만들었다.
RequestJoinProc.jsp파일을 만들어서 코드를 처리해보자.
서버를 보낼때 방식이 get방식과 post방식이 있엇다.
get은 url에 담아보내고 post에는 암호화되어서 넘어간다.

그런데 한글이 간혹 깨지는 경우가 있다.
server.xml
xml은 db를 대체해서 쓴다.
고급 프로그래밍갈수록 많이 사용한다 이게 바뀌어서 json이된다.
extnsible markup lan 확장가능한 마크업 언어이다.
텍스트파일은 자바에서 불러올때 가독성이 떨어져서 xml을 사용한다.
xml파싱이 굉장히 편리하다.
json 은 좀더 간단하게 문서를 표현한 패턴이다.
<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" URIEncoding="EUC-KR"/>
URIEncoding="EUC-KR"을 추가해주면 GET방식의 한글이 깨질때 문제가 안생긴다.

한글을 post로 받아올때 깨지면 request.setCharacterEncoding("UTF-8")을 해줘야한다.

id pass1,2 email tel은 평소와 같이 getParater하면된다.

checkbox는 한꺼번에 여러가지 값을 가져와야한다.
그래서 배열로 받아와야한다. 하나의 파라미터에서 여러개의 값이 오는 것이다.
String[] checkbox = request.getParameterValues("hobby");

select박스는 결국 하나만 받으니 getParameter로 하나만 받아주자.
String job = request.getParameter("job");

radio버튼도 하나만 선택된다.
다음은 이것을 테이블에 뿌릴 것이다.

<div align="center">
    <h2>회원정보보기</h2>
    <%
        //post방식으로 데이터가 넘어올때 한글이 깨질수 있기에
        request.setCharacterEncoding("UTF-8");
        //각종 사용자로부터 넘어온 데이터를 저장
        String id = request.getParameter("id");
        String pass1 = request.getParameter("pass1");
        String pass2 = request.getParameter("pass2");
        String email = request.getParameter("email");
        String tel = request.getParameter("tel");

        //배열타입으로 변환
        String[] checkbox = request.getParameterValues("hobby");

        String job = request.getParameter("job");
        String age = request.getParameter("age");
        String info = request.getParameter("info");
    %>
</div>

13. Jsp 페이지 내장객체 5

데이터를 받는 것 까지 했다.
먼저 pass1과 pass2를 비교하고 틀리면 다시 가입페이지로
자바스크립트에서 history.go(-1); 하면 이전페이지로 돌아가게된다.
if문을 사용하자.

<script type="text/javascript">
    alert("비밀번호가 틀립니다."); //경고창
    history.go(-1); //이전페이지로 이동
</script>

이외에도 getRemoteHost() getRemoteAddress()등을 사용하면 사용자의 정보를 얻을 수 있다.
setAttribute getAttribute등은 잘 알아둘 필요가 있다.

배열은 for문으로 꺼내지 않으면 배열의 참조값이 나와서 for문으로 출력해야한다.

<table width="400" border="1">
    <tr height="50">
        <td width="150" align="center">아이디 </td>
        <td width="350" align="center"><%= id %></td>
    </tr>

    <tr height="50">
        <td width="150" align="center">이메일</td>
        <td width="350" align="center"><%= email %></td>
    </tr>

    <tr height="50">
        <td width="150" align="center">전화 번호</td>
        <td width="350" align="center"><%= tel %></td>
    </tr>

    <tr height="50">
        <td width="150" align="center">당신의 관심분야</td>
        <td width="350" align="center">
        <%
            for(int i=0 ; i< hobby.length ; i++){
                out.write(hobby[i] + " ");
            }
        %>
        </td>
    </tr>

    <tr height="50">
        <td width="150" align="center">당신의 직업</td>
        <td width="350" align="center"><%= job %></td>
    </tr>

    <tr height="50">
        <td width="150" align="center">당신의 연령</td>
        <td width="350" align="center"><%= age %></td>
    </tr>

    <tr height="50">
        <td width="150" align="center">하고싶은말</td>
        <td width="350" align="center"><%= info %></td>
    </tr>
</table>

14. Jsp 페이지 내장객체 6

reponse 객체를 배워보자.
사용자에게 응답에 관련된 내용이다.
addCookie, sendRedirect정도 뿐이다.
사용자에게 보여줄것은 많은데 사용자에게 떠넘길거는 특별히 있지 않다.
서버측의 정보를 줄 일이 별로 없다.

주로 헤더정보입력이나 리다이렉트 기능만 제공한다.
페이지를 이동시키는 정도의 일을 한다.

로그인페이지 -> id와 패스워드 읽기 -> 사실은 db를 왓다옴
틀리면 로그인페이지 맞으면 로그인된 메인페이지

<h2>로그인 처리 페이지</h2>
<%
    request.setCharacterEncoding("UTF-8");

    //임의적으로 ID와 PASS설정
    String dbid = "aaaa";
    String dbpass = "1234";

    //사용자로부터 얻기
    String id = request.getParameter("id");
    String pass = request.getParameter("pass");

    if (dbid.equals(id) && dbpass.equals(pass)) {
        //아이디와 패스워드가 일치하니 메인페이지 보여주기
        response.sendRedirect("ResponseMain.jsp?id="+id);
    } else {
%>    
    <script>
        alert("아이디와 패스워드가 일치하지 않습니다.");
        history.go(-1);
    </script>
<%
    }
%>

---

<%
    request.setCharacterEncoding("UTF-8");
%>
<h2><%= request.getParameter("id")%>님 반갑습니다.</h2>

15 . Jsp 페이지 내장객체 7

15.1 Out

Out객체에 대해서 알아보자.
JSP페이지에서 출력할 내용을 가지고 있는 출력스트림객체이다.
즉 브라우저에 출력할때 사용하는 클래스이다.
서블릿이 자동으로 만들어 놓은 것이다.

스크립트 밖에서 쓰면 표현식을 쓰는게 편하고
스크립트 안에서 사용하면 out을쓰는게 편하다.

jsp확장태그 for문 사용하고 그러면 모델2이다.

화면에 값을 표시하는 방법은 표현식, out객체, EL표기(나중)가 있다.

15.2 Session

Session도 스크립트 릿안에서만 사용가능하다.
페이지를 벗어나면 페이지 데이터를 넘길 수가 없다.
그런데 세션을 사용하면 넘길 수 있다.

session.setAttribute(키, 값);으로보낸다.
내가 보고있는 브라우저를 기준으로 공유한다.

받을때는 Object타입으로 오기때문에 강제 타입변환을 해줘야한다.

<h2>세션 연습</h2>
<%
String name = "shin";
//세션을 이용하여 데이터를 유지
session.setAttribute("name", name);
//세션유지시간
session.setMaxInactiveInterval(10); //10초간 세션을 유지
%>
<a href="SessionName.jsp">세션네임페이지로 이동</a>

---

<h2>세션 네임페이지 입니다.</h2>
<%
    String name = (String) session.getAttribute("name");
%>
<%=name %> 님 반갑습니다.

15.3 application

세션은 웹브라우저마다 저장이다.
application은 웹브라우저 정보자체를 저장한다. 웹어플리케이션을 기준으로 한다.
실무에서는 많이 사용하지는 않는다.
사용자들은 파일이 어디에 저장되고 그런것을 알필요없어서 알려주면 안된다.
보통 개발자만 사용한다.

16. Jsp 페이지 디렉티브

액션태그 넘어가기전 JSP include 디렉티브 Taglib 디렉티브
페이지 지시어에서 사용하는 것들을 추가로 알아보자.
Taglib 디렉티브는 모델2에서 배우자.

16.1 include 디렉티브

포함시키다. 한페이지에 TOP BUTTOM LEFT CENTER페이지 등등 가지고 있다.
매번 그리면 불편하다.
top.jsp buttom.jsp를 만들고 얘들을 계속 만드는게 아니라 하나로 통합해서 사용하면 안만들어도된다
이런것들을 포함시키는 것이 include이다.
-> tiles로 배워서 사용햇엇다. 그런데 이것들도 사용안한다. 새로운 방식을 국비에서 배울 것 같다.

핵심은 이 것들이 하나의 page로 인식 및 변환후 컴파일된다.
top.jsp 내용
원래 page 내용
botton.jsp 내용

액션태그는 각각 컴파일해서 하나로 된다. 리퀘스트 객체가 인식이 서로안되는 경우가 있다.
그래서 여기서 판단을 잘해야한다.
include태그랑 include액션태그를 잘 구분해야한다.

1. top페이지

<div align="center">
    <table width = "600" border = "1">
        <tr height="100">
            <td align = "center" colspan="6">
                <font size ="15">Camera 정보 사이트</font>
            </td>
        </tr>

        <tr height="50">
            <td align="center">케논</td>
            <td align="center">니콘</td>
            <td align="center">삼성</td>
            <td align="center">소니</td>
            <td align="center">올림프스</td>
            <td align="center">lg</td>
        </tr>

    </table>
</div>

2.buttom페이지

<div align="center">
    <table width = "600" >
        <tr height="100">
            <td align = "center" >
                회사 소재 : 서울 특별시 강서구 발산동 대주 @ 102동 <br>
                전화 번호 : 02-88-78788
            </td>
        </tr>
    </table>
</div>

3. 메인페이지

<div align="center">
    <table width = "600" border = "1">
    <!-- Top -->
        <tr height="150" align="center">
            <td>
                <%@include file="Top.jsp" %>
            </td>
        </tr>

    <!-- Center -->
        <tr height="400">
            <td width = "600" align="center">
                <img alt ="" src = "images/1.jpg" width="400" height="300">
            </td>
        </tr>

    <!-- Buttom -->
        <tr height="100">
            <td width = "600" align="center">
                <%@include file="Buttom.jsp" %>
            </td>
        </tr>
    </table>
</div>

17. Jsp 페이지 액션 태그 1

액션태그까지만 배우면 응용이라고 보면된다.

include 액션태그
forward 액션태그
useBean 액션태그
setProperty 액션태그
getProperty 액션태그
등등이 잇다.

17.1 include 액션태그

지난시간에 배운 <%@include file="Top.jsp" %>으로 넣엇더너 include 지시어랑 비슷하다.
액션태그와 지시어는 내용은 같다. 현재페이지에 다른페이지를 포함시키는 것이다.
그런데 차이점이 있다.

사진과 같은 페이지를 만들 것이다.
보통 탑과 바텀은 변하지 않고 레프트 와 가운데만 바뀐다

Top

<!--Top  -->
<table width = "800"> 
    <tr height="100">
    <!--로고 이미지  -->
        <td colspan = "2" align = "center" width= "206">
            <img alt = "" src = "images/1.png" width="200" height="70">
        </td>

        <td colspan = "4" align = "center">
            <font size= "10">낭만 캠핑 </font>
        </td>
    </tr>
    <tr height="50">
        <td width = "110" align = "center">텐트</td>
        <td width = "110" align = "center">의자</td>
        <td width = "110" align = "center">식기류</td>
        <td width = "110" align = "center">침낭</td>
        <td width = "110" align = "center">테이블</td>
        <td width = "140" align = "center">화톳불</td>        
    </tr>
</table>

18. Jsp 페이지 액션 태그 2

<jsp:include page="Top.jsp" >            
    <jsp:param value="aaa" name= "id" />
</jsp:include>

이 액션 태그 include 사이에 파라미터를 넣어서 보낼 수 있다.
include지시어는 이 데이터를 넘길 수가 없다.

지시어를 쓰면 합쳐져서 들어오는데
액션태그를 사용하면 각각 처리되고 하나의 페이지가 되게 된다.
확장의 개념이라고 생각하면된다.
지시어는 단순히 페이지만 붙이는 것이다.
값넘기는 것이 많으니 보통은 액션태그를 많이 사용한다.

Bottom

<!--Bottom-->
<table width ="800">
    <tr height = "100">
        <td align = "center">
        이용약관
        이메일무단수집거부
        개인정보처리방침
        영상정보처리기기 운영관리방침
        아이디어 정책
        Copyright. SAMSUNG ELECTRO-MECHANICS All rights reserved.
        삼성전기(주)대표이사 경계현사업자등록번호 124-81-00979
        경기도 수원시 영통구 매영로 150 (매탄동)
        </td>
    </tr>
</table>

Left

<!--Left -->
<table width = "200" border="1">
    <tr height="60">
        <td width= "200" align="center"><a href ="#">스노우 파크</a></td>
    </tr>

    <tr height="60">
        <td width= "200" align="center"><a href ="#">콜맨</a></td>
    </tr>

    <tr height="60">
        <td width= "200" align="center"><a href ="#">지프</a></td>
    </tr>

    <tr height="60">
        <td width= "200" align="center"><a href ="#">코벵아</a></td>
    </tr>
</table>

Center

<!-- Center -->
<table width = "600">
    <tr height="400">
        <td align="center">
        <img alt="" src="images/2.jpg" width="500" height="350">
        </td>
    </tr>
</table>

Main

<div align="center">
    <table border="1" width = "800">
        <!-- Top -->
        <tr height="150">
            <td align="center" colspan="2">
                <jsp:include page="Top.jsp" >            
                    <jsp:param value="aaa" name= "id" />
                </jsp:include>
            </td>
        </tr>

        <tr height="400">
            <!-- Left -->
             <td align="center" width = "200"><jsp:include page="Left.jsp"/></td>
             <!-- Center -->    
             <td align="center" width = "600"><jsp:include page="Center.jsp" /></td>
        </tr>

        <!--Buttom-->
        <tr height="100">
            <td align="center" colspan="2"><jsp:include page= "Buttom.jsp" /></td>
        </tr>
    </table>
</div>

2023.03.21

이부분들을 서버쪽 응답받는것은 서블릿으로 처리하는것으로 배웟엇는데
그게 모델2인것을 깨닫게 되엇다.
jsp로만 처리하고 받는게 너무 복잡하다. 그래도 원론적으로는 서비스함수를 서블릿에 옮기는 것이니
비슷하다고 생각이 된다. 나중에 모델2수업을 들으면 더 편해질 듯하다.