2023.04.02 JSP
JSP 쇼핑몰 만들기
1. 모델2 이해
간단하게 모델2를 이해해보자.
모델1이나 모델2 브라우저에서 접근하는 건 같다.
요청을 jsp에서 처리했는데 이제는 서블릿에서 처리하는 것이다.
모든것이 하나의 jsp에서 처리했엇다.
개집을 짓는데 사람집을 지을 필요는 없듯이 복잡하게 지을 필요가 없다면
그냥 모델1을 사용해도되는 것이다.
내용이 복잡하고 업로드 페이지 뷰수가 많아지면 모델2가 좋다.
request를 서블릿이라는 java파일이 받는 것이다.
브라우저 요청을 서블릿이 처읍부터 받고 jsp가 이 결과를 보여주는 것이다.
결과만 보여주는 것이다.
그래서 jsp에서 자바코드가 아예없어진다.
그럼 더 복잡해진다? 맞긴하다. 하지만 자바르 jsp에서 빼줘서 훨씬 간결해진다.
이렇게 분리해놓는게 mvc모델이다.
서블릿에서 박스 그런것을 모두 관리하고 이것을 view에 넘겨준다.
간단하게 프로그램을 짜보자.
form에 jsp파일을 넣어서 처리했는데 서블릿이름을 써줘야한다.
요즘엔 어노테이션 기능으로 매핑하고 과거는 web.xml에 등록해서 인식한다.
<div align="center">
<h2>로그인</h2>
<form action="LoginProc.do" method="post">
<table border="1">
<tr height="40">
<td width="120"> 아이디</td>
<td width="180">
<input type="text" name="id"/>
</td>
</tr>
<tr height="40">
<td width="120"> 비밀번호</td>
<td width="180">
<input type="password" name="password"/>
</td>
</tr>
<tr height="40">
<td colspan="2" align="center">
<input type="submit" value="로그인"/>
</td>
</tr>
</table>
</form>
</div>서블릿은 자바에서 만들어준다.
form에 들어가는 이름과 클래스명이 같을 필요는 없는데 매핑하는 것만 이름이 같으면된다.
get방식이건 post방식이건 reqPro메소드를 새로 만들어서 받아주자.
왜? 무슨 방식이 넘어온지 모를 수 있기때문이다.
그래서 서블릿에서 처리한것을 jsp에 보내주면된다.
request 객체에 setAttribute해서 보내주면된다. 세션으로해도 같다.
RequestDispatcher 객체를 만들어서 jsp로 보내주고 foward시켜야한다.
넘어온 값은 el표현법으로 받아주면된다.
호출되는 것은 서블릿이지만 보여주는 것은 결국 jsp파일이다.
@WebServlet("/LoginProc.do")
public class LoginProc extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
reqPro(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
reqPro(request, response);
}
public void reqPro(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String id = request.getParameter("id");
String pass = request.getParameter("password");
request.setAttribute("id", id);
request.setAttribute("pass", pass);
//jsp에 떠넘기기
RequestDispatcher dis = request.getRequestDispatcher("LoginProc.jsp");
dis.forward(request, response);
}
}<%@ 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>
넘어온 데이터는 ${id}와 ${pass}
</body>
</html>2. Expression Language 사용법 1
EL. 표현언어라고 많이 한다.
JSP MVC에서는 EL을 사용해야한다.
out.println / 표현식을 사용했는데 el은 화면에 뭔가를 출력하는 것이다.
EL자체에서 연산자를 사용할 수 있고 파라미터 attribute이름을 출력할 수 있다.
EL은 그냥 변수 i는 출력할 수 없다.
EL을 사용할때는 어트리뷰트나 파라미터를 출력해야한다.
다이렉트로 변수이름을 출력하는게 아니라 객체에 담아서 출력할때 사용할 수 있다.
EL이 재밋는점은 안에서 연산자를 사용할 수 있다.
out.print는 변수 그자체만 가능 연산신 불가능
표현식은 변수그자체, 연산식 가능하나 객체 자체를 출력하는 것은 불가능
EL은 변수그자체는 불가능 연산식, 객체 그자체를 출력하는 것이 가능하다.
이 것들을 잘 구분해서 사용하면 된다.
EL은 연산시 스트링 숫자를 넣어도 숫자로 자동으로 바꾸어 준다.
이런 사용법도 잘 파악해야한다.
<%
int i = 3;
out.println("i = " + i);
request.setAttribute("ia", i);
%>
<p>
i = <%= i %>
<p>
i = ${ia}
i = ${ia > 4} <!-- false -->
</p>2.1 EL연습
로그인폼을 EL로 받아서 만들어보자.
과거는 String id = requeest.getParametr해서 꺼내서 사용했지만 그냥 꺼내서 사용할 수 있다.
${param.파라미터이름}으로 불러오면된다.
계속 이런것을 다뤄서 EL을 잘 다룰 필요가 있다.
사용하는 방법을 더 다뤄보자.
<div align="center">
<h2>로그인</h2>
<form action="ELLoginProc.jsp" method="post">
<table border="1">
<tr height="40">
<td width="120"> 아이디</td>
<td width="180">
<input type="text" name="id"/>
</td>
</tr>
<tr height="40">
<td width="120"> 비밀번호</td>
<td width="180">
<input type="password" name="password"/>
</td>
</tr>
<tr height="40">
<td colspan="2" align="center">
<input type="submit" value="로그인"/>
</td>
</tr>
</table>
</form>
</div><%@ 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>
당신의 아이디는 ${param.id } 패스워드는 ${param.password }입니다.
</body>
</html>3. Expression Language 사용법 2
${paramValue.이름[인덱스]}도 가능하다.
이번에는 간단하게 계산기를 만들어보자.
그런데 아직은 exp2를 파라미터로 가져와서 분류를 해준다음에 사용해야한다.
<div align="center">
<h2>결과보기</h2>
<%
String exp2 = request.getParameter("exp2");
if (exp2.equals("+")){
%>
결과는 ${param.exp1 + param.exp3}
<%
}
%>
<%
if (exp2.equals("-")){
%>
결과는 ${param.exp1 - param.exp3}
<%
}
%>
</div>3.2 같은 화면에 결과
if문에 따라서 input값을 보고 null처리도 해줘야한다.
<%
String exp2 = request.getParameter("exp2");
%>
<div align="center">
<!-- 앞코드 -->
<td align="center" width="100">
<%
if(exp2 != null){
if (exp2.equals("+")){
%>
<input type="text" name="exp4" value="${param.exp1 + param.exp3}"/>
<%
}
%>
<%
if (exp2.equals("-")){
%>
<input type="text" name="exp4" value="${param.exp1 - param.exp3}"/>
<%
}
} else {
%>
<input type="text" name="exp4"/>
<%
}
%>
<!-- 뒤코드 -->
</table>
</form>
</div>4. JSTL 1
Java Standard Tag Library이다.
무슨뜻이나면 jsp에서 사용하는 태그 라이브러리 이다.
jsp액션태그를 넘어서 더 풍부한 것을 볼 수 있다.
총 5개의 라이브러리가 있다.
코어(변수지원 흐름제어 URL처리) 접두어 c 가장 많이 사용한다.
데이터들을 박스인 list에 담아서 떠넘겼다. 그런데 jsp가 이것을 읽으려면 for문이 필요하다.
그런데 for문을 사용하면 스크립트릿을 사용해야하는데 이것은 의미가 없다.
그래서 이런 반복문을 태그로 사용하는 것이다.
이런 태그롤 사용해서 자바 코드를 jsp에서 아예 빼게 되는 것이다.
자바의 흐름제어 변수 등을 태그로 사용하는 것이고 jsp가 지향하는 목표이다.
다른 db태그 그런것은 DAO를 사용해서 잘 사용안된다. 국제화 통화기호 등등 포맷 등정도는 사용할 수도 있다.
결론은 JSTL을 사용하려면 다운을 받아야한다.
다운받은것은 아파치 톰캣 경로의 라이브러리에 넣어주면된다.
WEB-INF -lib에도 넣어주자.
코어태그를 사용하고 싶다면 인식을 할 수 있도록 선언을 해줘야한다.
WEB-INF -lib에 넣어두었으면 uri가 자동으로 뜬다.
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
조건에는 EL표현법을 넣어줘야 태그가 분별할 수 있다.
<!-- if문 사용법 -->
<c:if test="${4>3}">
안녕하세요
</c:if>변수를 선언하고 싶다면 set JSTL을 사용하면된다.
request.setAttribute한 것과 같은 의미를 가지게 된다.
var에 변수이름 value에 변수 값을 넣어주면된다.
<!-- 변수선언 -->
<c:set var="i" value="4" />
<c:if test="${i>3}">
안녕하세요
</c:if>제일많이 사용하는것이 변수 if for문 등이다.
choose는 switch문
forEach는 자바의 for문과 비슷하다.
변수이름 var 시작 begin 끝 end 조건 step EL표기로 넣어준다.
step을 안쓰면 자동으로 1씩 증가하게 된다. 변수도 굳이 안넣어도된다.
<!-- 반복문 for-->
<c:forEach begin="1" end="10">
점심시간입니다. <br />
</c:forEach>변수를 계산하려면 set과 응용해서 사용하면된다.
<!-- 반복문 for-->
<c:set var="sum" value="0" />
<c:forEach var="j" begin="1" end="10">
<c:set var="sum" value="${sum = sum + j}" />
</c:forEach>
${sum}step은짝수만 더하고 싶을때 i = i+2등일때 사용하면된다.
5. JSTL 2
set forEach if을 연습해보았는데 더 연습해보자.
5.1 별찍기
별표 피라미드를 쌓은 프로그램을 짜보자.
이런식으로 가야한다.
ssss*
sss***
ss**
s***
********\
i0 k0
i1 k0 k1 k2 3까지
i2 k0 k1 k2 k3 k4 5까지
자바코드로짜면 이런식이다.
for (int i = 1 ; i <= 5 ; i++){
for (int j = i ; j < 5 ; j++){
System.out.print(" ");
}
for (int k = 1 ; k < i * 2 ; k++){
System.out.print("*");
}
System.out.println();
}end값을 포함해서 돌아가니 확인하자
<c:forEach var="i" begin="1" end="5">
<c:forEach begin="${i}" end="4">
</c:forEach>
<c:forEach begin="1" end="${i*2-1}">
*
</c:forEach>
<br />
</c:forEach>5.2 list사용
데이터를 받아왓을때 list로 찍어보자.
forEach에 begin과 end가 아닌 item에 벡터를 넣으면 향상된 for문처럼 알아서 돌아가게된다.
변수명.bean의변수이름을 el로 꺼내오면된다.
<div align="center">
<h2>모든회원보기</h2>
<table border="1">
<tr height="50">
<td align="center" width="150px"> 아이디 </td>
<td align="center" width="250px"> 이메일 </td>
<td align="center" width="200px"> 전화번호</td>
<td align="center" width="200px"> 취미 </td>
</tr>
<c:forEach var="bean" items="${vec}">
<tr height="50">
<td align="center" width="150px">
<a href="MemberInfo.jsp?id=${bean.id} }">${bean.id}</a></td>
<td align="center" width="250px">${bean.email} </td>
<td align="center" width="200px"> ${bean.tel} </td>
<td align="center" width="200px"> ${bean.hobby} </td>
</tr>
</c:forEach>
</table>
</div>2023.04.02 후기
EL을 사용할때 무조건! attribute의 값만 사용가능하다는 것을 인지해야한다.
그냥 변수의 값을 사용할 수는 없다.
JSTL의 종류가 많아 사용법이 헷갈린다. 많이 사용해보면서 익숙해질 필요가 있어보인다.
서블릿을 통해 값을 매핑하고 그런것들을 하게 되면 jsp자체는 내용이 간편해질 것이 기대된다.